@charset "UTF-8";

/* ----------------------------------------------

  ECサイト css

----------------------------------------------- */

/* contents.css
----------------------------------------------- */
.sp {
  display: none;
}
.tb {
  display: none;
}
.sp_only {
  display: none;
}
.pc {
  display: block;
}
.pc_only {
  display: block;
}
.sp_only_none {
  display: block;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.a_link {
  margin-top: -130px;
  padding-top: 130px;
}
.a_none {
  pointer-events: none;
}
a {
  text-decoration: none;
  color: initial;
  transition: 0.3s ease;
}

a:hover {
  cursor: pointer;
  transition: 0.3s ease;
}
a img {
  transition: 0.3s ease;
}
a:hover img {
  opacity: 0.8;
  transition: 0.3s ease;
}



/* flex
----------------------------------------------- */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flexcol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexwrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexwrapjc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flexwrapjbe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flexcolac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flexcoljc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flexcolacjc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flexacjc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flexac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flexas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flexae {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.flexjc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flexjbe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flexjs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.flexje {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flexacjbe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flexacjar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flexwrapacjbe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.flexwrapac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flexwrapacjc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.align_bl {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.align_ce {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.container {
  max-width: 1500px;
  width: 90%;
  margin: 0 auto;
}
.container_s {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}





@media only screen and (max-width: 1024px) {
  .pc_only {
    display: none;
  }
  .tb {
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .tb {
    display: none;
  }
  .sp {
    display: block;
  }
  .a_link {
    margin-top: -90px;
    padding-top: 90px;
  }
}

@media only screen and (max-width: 479px) {
  .sp_only_none {
    display: none;
  }
  .sp_only {
    display: block;
  }
}






/* 共通
----------------------------------------------- */
body {
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #1F1F1F;
  line-height: 1.8;
}
h2 {
  font-size: 25px;
  font-weight: 500;
}
.container {
  float: unset;
  background-color: unset;
}
a.cart_icon {
  color: #fff;
}

#container {
  margin-top: 150px;
}
.f_contact a {
  text-decoration: none !important;
}
header a {
  text-decoration: none !important;
}
header a:hover {
  opacity: 1;
}
footer {
  text-align: left;
}
footer a {
  text-decoration: none !important;
}
.f_contact a:hover,
footer a:hover {
  opacity: 1;
}
.fa {
  content: unset;
  width: auto;
  height: auto;
  position: unset;
  right: unset;
  top: unset;
  border-top: none;
  border-right: none;
  transform: none;
  color: unset;
}






@media only screen and (max-width: 1024px) {
  h2 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 768px) {
  h2 {
    border-bottom: none;
  }
}

@media only screen and (max-width: 479px) {
  body {
    margin-top: 0 !important;
  }
  h2 {
    font-size: 18px;
    line-height: 1.8;
  }
  #main-content {
    margin-top: 50px;
  }
  footer {
    background-color: #fff;
  }
}


/* 商品詳細ページ
----------------------------------------------- */
#detailarea .picture_message {
  height: 33px;
  margin-top: -33px;
}


/* 商品レビュー */
#customervoice_area .container {
  width: 100%;
}

/* 最近チェックした商品 */
#main_column .raku2_history_list .block_body,
.raku2_history_list .block_body {
  gap: 80px 60px;
  margin-left: 0 !important;
}
#main_column .raku2_history_list div.raku2_history_layout,
#main-content div.raku2_recommend_list .raku2_recommend_layout,
#main-content div.raku2_history_list .raku2_history_layout {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  width: calc( 100% / 4 - 45px );
}



@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 768px) {
  #main-content {
    width: 95%;
    margin: 0 auto 30px;
  }
  #main_column .raku2_history_list .block_body,
  .raku2_history_list .block_body {
    gap: 60px 30px;
  }
  #main_column .raku2_history_list div.raku2_history_layout,
  #main-content div.raku2_recommend_list .raku2_recommend_layout,
  #main-content div.raku2_history_list .raku2_history_layout {
    width: calc( 100% / 3 - 20px );
  }
  div.raku2_ranking_list .raku2_ranking_layout img, div.raku2_recommend_list .raku2_recommend_layout img,
  div.raku2_history_list .raku2_history_layout img, div.raku2_related_list .raku2_related_layout img {
    width: 94%;
    height: 94%;
  }
}

@media only screen and (max-width: 479px) {
  #main_column .raku2_history_list .block_body,
  .raku2_history_list .block_body {
    gap: 40px 20px;
  }
  #main_column .raku2_history_list div.raku2_history_layout,
  #main-content div.raku2_recommend_list .raku2_recommend_layout,
  #main-content div.raku2_history_list .raku2_history_layout {
    width: calc( 100% / 2 - 10px );
  }
  #main-content div.raku2_history_list .raku2_history_layout h3 {
    font-size: 14px;
  }
  #main-content div.raku2_history_list .raku2_history_layout .raku2_price_area {
    font-size: 13px;
  }
  .raku2_productImage {
    width: auto;
    height: auto;
    max-width: unset;
    max-height: unset;
  }
  div.raku2_ranking_list .raku2_ranking_layout img, div.raku2_recommend_list .raku2_recommend_layout img,
  div.raku2_history_list .raku2_history_layout img, div.raku2_related_list .raku2_related_layout img {
    width: 100%;
    height: 100%;
  }
}






/*
----------------------------------------------- */





@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 479px) {

}