/*======================================
COMMON ---------------------------------
======================================*/
.top-content-block {
  width: 100%;
  margin-bottom: 5em;
}
.btn-more {
  text-align: center;
  background-color: #f5f5f5;
  width: 50%;
  padding: 10px 0;
  border: 1px solid #ccc;
  border-radius: 16px;
  box-sizing: border-box;
  margin: 0 auto;
  cursor: pointer;
  transition: background-color .3s, color .3s, border .3s;
}

/* FOR SP ----------------------------*/
@media (max-width:980px) {
  .btn-more {width: 100%;}
}


/*======================================
NEWS -----------------------------------
======================================*/
#news {
  width: 100%;
  margin-bottom: 1em;
}
#news ul li {
  font-size: 85%;
  line-height: 1.5em;
  padding-bottom: 10px;
  border-bottom: 1px solid #555;
  margin-bottom: 1em;
}
#news ul li:nth-child(n+2) {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#news ul li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
#news .news-date {
  color: #fff;
  font-weight: bold;
  background: #e57e17;
  padding: 0 .3em;
}
#news .news-banner img {width: 100%;}
#news .news-pickup {
  font-size: 100%;
  font-weight: bold;
  display: block;
  width: 100%;
  padding: 6px;
  box-sizing: border-box;
  color: #bf0000;
  text-decoration: none;
  text-align: center;
  border: 2px solid #bf0000;
  margin-bottom: 16px;
}

/* FOR SP ----------------------------*/
@media (max-width:980px) {
  #news ul li {font-size: 100%;}
}


/*======================================
NEWS BOTTOM BANNER ---------------------
======================================*/
.news-bottom ul {margin-bottom: 1em;}
.news-bottom ul li {width: 100%;}
.news-bottom img {display: block;width: 100%;}


/*======================================
SLIDE BANNER ---------------------------
======================================*/
.slider {
  position: relative;
  margin-bottom: 5em;
}
.slider .bx-wrapper {
  z-index: 0;
}
.slider .bx-wrapper .bx-viewport {
  box-shadow: none;
  left: 0;
  border: none;
}
.slider .bx-wrapper img {
  width: 100%;
  height: auto;
}


/*======================================
CONTENTS BLOCK -------------------------
======================================*/
.contentban ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.contentban ul li {
  font-size: 90%;
  line-height: 1.5em;
  width: calc(94% / 4);
  margin: 0 2% 2em 0;
}
.contentban ul li a {
  color: #333;
  text-decoration: none;
}
.contentban img {
  display: block;
  width: 100%;
  margin-bottom: .5em;
}

/* PICK UP ---------------------------*/
#pickupcon ul li:nth-child(1) {width: calc(((94% / 4) * 2) + 2%);}
#pickupcon ul li:nth-child(4n-1) {margin-right: 0;}

/* FETURE ----------------------------*/
#featurecon ul li:nth-child(4n) {margin-right: 0;}

/* FOR SP ----------------------------*/
@media (max-width:980px) {
  .contentban ul li {width: calc(98% / 2);}

  /* PICK UP -------------------------*/
  #pickupcon ul li:nth-child(1) {width: 100%;}
  #pickupcon ul li:nth-child(2n-1) {margin-right: 0;}

  /* FETURE --------------------------*/
  #featurecon ul li:nth-child(2n) {margin-right: 0;}
}


/*======================================
SEASON CON -----------------------------
======================================*/
.seasonban img {
  display: block;
  width: 100%;
}
.seasonban ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.seasonban ul li {margin-bottom: 1em;}
.seasonban ul.seasoncon-big li,
.seasonban ul.seasoncon-subbig li {width: 100%;}
.seasonban ul.seasoncon-mid li {width: calc(98% / 2);margin-right: 2%;}
.seasonban ul.seasoncon-sml li {width: calc(96% / 3);margin-right: 2%;}
.seasonban ul.seasoncon-mid li:nth-child(2n),
.seasonban ul.seasoncon-sml li:nth-child(3n) {margin-right: 0;}


/*======================================
HOW TO SEARCH --------------------------
======================================*/
#howtosearch {
  width: 100%;
}
.howtosearch-block {
  margin-bottom: 5em;
}
.howtosearch-block h3 {
  color: #870000;
  font-size: 130%;
  font-weight: bold;
  padding-left: 1.5em;
  margin-bottom: 1em;
  background: url(https://file001.shop-pro.jp/PA01005/739/images/mode/icon-check.png) no-repeat left center / 1em;
}
.howtosearch-block ul {
  display: flex;
  flex-wrap: wrap;
}
.howtosearch-block > ul > li {
  line-height: 1.5em;
  margin-bottom: 2em;
  margin-right: 2%;
}

/* GENRE -----------------------------*/
.howtosearch-genre ul li {
  text-align: center;
  width: calc(90% / 6);
}
.howtosearch-genre ul li:nth-child(6n) {
  margin-right: 0;
}

/* BIRTH -----------------------------*/
.howtosearch-birth > ul {
  justify-content: space-between;
  margin: 3em 0 0;
}
.howtosearch-birth > ul > li {
  width: calc(94% / 4);
  margin-bottom: 5em;
}
.howtosearch-birth > ul > li:nth-child(4n) {
  margin-right: 0;
}
.howtosearch-birth > ul > li > span {
  font-weight: bold;
  text-align: center;
  display: block;
  border-bottom: 3px double #555;
  box-sizing: border-box;
  margin-bottom: .5em;
  font-family: "游明朝",YuMincho,"Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
  font-size: 180%;
}
.howtosearch-birth > ul ul {
  display: flex;
  flex-flow: column;
}
.howtosearch-birth > ul ul li a {
  line-height: 1.2em;
  height: 30px;
  padding-left: 40px;
  display: flex;
  align-items: center;
}
.howtosearch-birth > ul ul li img {display: block;}
.howtosearch-birth > ul li:nth-child(1) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/garnet.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(2) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/amethyst.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(3) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/birth/aquamarine3gatsu.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(3) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/coral.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(3) ul li:nth-child(3) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/bloodstone.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(4) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/crystal.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(5) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/emerald.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(5) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/jade.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(6) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/moonstone.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(6) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/pearl.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(7) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/ruby.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(7) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/carnelian.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(8) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/peridot.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(8) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/onix.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(9) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/sapphire.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(9) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/iolite.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(9) ul li:nth-child(3) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/kuntuait.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(10) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/opal.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(10) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/tourmaline.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(10) ul li:nth-child(3) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/rosequarts.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(11) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/topaz.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(11) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/citrine.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(12) ul li:nth-child(1) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/turquoise.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(12) ul li:nth-child(2) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/lapislazuli.png) no-repeat left center / auto 30px;}
.howtosearch-birth > ul li:nth-child(12) ul li:nth-child(3) a {background: url(https://file001.shop-pro.jp/PA01005/739/images/stone/tanzanite.png) no-repeat left center / auto 30px;}

/* FORTUNE ---------------------------*/
.howtosearch-fortune ul li {width: calc(94% / 4);}
.howtosearch-fortune ul li:nth-child(4n) {margin-right: 0;}
.howtosearch-fortune ul li span {
  display: block;
  font-size: 130%;
  font-weight: bold;
  margin: .5em 0;
}

/* HISTORY ---------------------------*/
.howtosearch-history ul li {width: calc(94% / 4);}
.howtosearch-history ul li:nth-child(4n) {margin-right: 0;}

/* SHAPE -----------------------------*/
.howtosearch-shape ul li {width: calc(90% / 6);}
.howtosearch-shape ul li:nth-child(6n) {margin-right: 0;}

/* FOR SP ----------------------------*/
@media (max-width:980px) {
  /* GENRE ---------------------------*/
  .howtosearch-genre ul li {font-size: 75%;width: calc(94% / 4);}
  .howtosearch-genre ul li:nth-child(6n) {margin-right: 2%;}
  .howtosearch-genre ul li:nth-child(4n) {margin-right: 0;}

  /* BIRTH ---------------------------*/
  .howtosearch-birth > ul > li {width: calc(96% / 3);}
  .howtosearch-birth > ul > li:nth-child(4n) {margin-right: 2%;}
  .howtosearch-birth > ul > li:nth-child(3n) {margin-right: 0;}

  /* FORTUNE -------------------------*/
  .howtosearch-fortune ul li {width: calc(96% / 3);}
  .howtosearch-fortune ul li:nth-child(4n) {margin-right: 2%;}
  .howtosearch-fortune ul li:nth-child(3n) {margin-right: 0;}

  /* HISTORY -------------------------*/
  .howtosearch-history ul li {width: calc(96% / 3);}
  .howtosearch-history ul li:nth-child(4n) {margin-right: 2%;}
  .howtosearch-history ul li:nth-child(3n) {margin-right: 0;}

  /* SHAPE ---------------------------*/
  .howtosearch-shape ul li {width: calc(94% / 4);}
  .howtosearch-shape ul li:nth-child(6n) {margin-right: 2%;}
  .howtosearch-shape ul li:nth-child(4n) {margin-right: 0;}
}


/*======================================
BLOG CON -------------------------------
======================================*/
#wordpress-posts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#wordpress-posts h3 {
  font-size: 100%;
  font-weight: normal;
  line-height: 1.5em;
}
#wordpress-posts > div {
  width: calc(96% / 3);
  margin-right: 2%;
  margin-bottom: 2em;
}
#wordpress-posts > div:nth-child(3n) {
  margin-right: 0;
}
#wordpress-posts img {
  border: 1px solid #8B665E;
  box-sizing: border-box;
}
.wordpress-more {
  width: 50%;
  margin: 0 auto;
}
.wordpress-more a {
  text-align: center;
  vertical-align: middle;
  background-color: #f5f5f5;
  display: block;
  width: 100%;
  padding: 10px 0;
  border: 1px solid #ccc;
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border 0.3s;
}

/* FOR SP ----------------------------*/
@media (max-width:980px) {
  #wordpress-posts > div {width: calc(98% / 2);}
  #wordpress-posts > div:nth-child(3n) {margin-right: 2%;}
  #wordpress-posts > div:nth-child(2n) {margin-right: 0;}
  .wordpress-more {width: 100%;}
}


/*======================================
HOVER FOR PC ---------------------------
======================================*/
@media (hover:hover) {
  /*====================================
  COMMON -------------------------------
  ====================================*/
  .btn-more:hover {
    color: #fff;
    background-color: #8B665E;
    border: 1px solid #8B665E;
    transition: background-color .3s, color .3s, border .3s;
  }


  /*====================================
  BLOG CON -----------------------------
  ====================================*/
  .wordpress-more a:hover {
    color: #fff;
    background-color: #8B665E;
    border: 1px solid #8B665E;
    transition: color 0.3s, background-color 0.3s, border 0.3s;
  }
}