/*==================================================================

styles.css

================================================================== */


/* --------------------------------------------------
	purifing
-------------------------------------------------- */
@charset "UTF-8";

.sec_purifing {font-size: .875rem;}

.sec_mainvisual span {display: block;}

[class*="title_purifing_sec"] {margin: 30px 0 15px; padding-bottom: 6px; border-bottom: 1px solid #e8e8e8; color: #7a97a5; font: bold 1.4rem/1.6 times new roman, 'sawarabi_mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'MS PMincho', serif;}

.title_purifing_sec02 {margin-top: 30px; background-color: #aec0c9; color: #fff; text-align: center; padding: 10px; border: none; font-size: 1.1875em; position: relative;}
.title_purifing_sec02:before {position: absolute; margin-left: -28px; top: -20px; left: 50%; width: 14px; border: 14px solid transparent; border-left: 14px solid #aec0c9; transform: rotate(90deg); content: '';}

/* .sec_purifing p {font-size: .875rem;} */
.sec_purifing p + p {margin-top: 1.5em;}


.sec_stone {margin: 30px auto 0; text-align: center; letter-spacing: -0.4em; display: flex; flex-wrap: wrap; }
.sec_stone .stone { margin: 0 1% 30px; width: 48%; max-width: 370px; letter-spacing: normal;box-sizing: border-box; text-align: left; position: relative; }
.sec_stone .stone:after {position: absolute; top: 0; width: 100%; height: 100%; background: url("../imgs/purifing_bg.jpg") repeat-x center top; content: ''; z-index: -1;}
.sec_stone .stone h3 {margin: 0 auto 20px; height: 281px; overflow: hidden; text-indent: -9999px; }
.sec_stone .stone h4 { margin-bottom: 1em; }
.sec_stone .stone p { font-size: .75rem;}
.sec_stone .stone .btn_container { width: 140px; margin: 20px auto 0;}
.sec_stone .stone .btn_container a { width: 140px; height: 36px; display: block; cursor: pointer; text-indent: -119988px; overflow: hidden; text-align: left; background: url("../imgs/purifing_sprite_btn.png") no-repeat left top; }
.sec_stone .stone .btn_container .btn_stop { display: none; background-position: left -36px; }

.purifing_selenite h3 {background: url("../imgs/purifing_selenite.jpg") no-repeat center top;}
.purifing_platinum h3 {background: url("../imgs/purifing_platinum.jpg") no-repeat center top;}
.purifing_imperial h3 {background: url("../imgs/purifing_imperial.jpg") no-repeat center top;}
.purifing_citrine  h3 {background: url("../imgs/purifing_citrine.jpg") no-repeat center top;}
.purifing_quartz   h3 {background: url("../imgs/purifing_quartz.jpg") no-repeat center top;}
.sec_stone .stone.none {opacity: 0;}


.list_stone  {margin: 20px auto 40px;}
.list_stone li { font-size: .8125rem;}
.list_stone li img {display: block; margin: 0 auto 10px;}

/* ------------------------------------------------------------------
	responsive - added 202105
------------------------------------------------------------------- */
/* ------------------------------------------------------------------
  for Smartphone  - ~ 767px
-------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .sec_mainvisual {margin: -20px -20px 20px; padding-top: 50px; background: url(../imgs/purifing_mainvisual_sp_bg.jpg) no-repeat bottom right #edeef0;}
  .sec_mainvisual span {margin:0 auto; width: 264px; height: 420px; background: url(../imgs/purifing_mainvisual_sp.jpg) no-repeat 0 0;}

}

/* ------------------------------------------------------------------
  for Smartphone / Portrait-tablets - ~ 992px
------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .pconly{display: none;}
  .sponly{display: block;}

  .sec_stone {justify-content: center;}
  .sec_stone .stone {width: 100%;}

  .list_stone {border-top: 1px solid #eee;}
  .list_stone li a {display: flex; align-items: center; padding-top: 10px; border-bottom: 1px solid #eee;}
  .list_stone li img {max-width: 100px; margin-right: 20px;}
  .list_stone li span {display: block; width: 90%;}

}

/* ------------------------------------------------------------------
  for Portrait-tablets only - 768px ~ 993px
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 993px) {

  .sec_mainvisual {background: url(../imgs/purifing_mainvisual_bg.jpg) repeat-x bottom;}
  .sec_mainvisual span {width: 100%; height: 325px; background: url(../imgs/purifing_mainvisual.jpg) no-repeat top right;}

}

/* ------------------------------------------------------------------
  for Tablets / Desktop - 993px ~
------------------------------------------------------------------- */
@media print, screen and (min-width: 993px) {
  .sponly{display: none;}
  .pconly{display: block;}


  .sec_mainvisual {background: url(../imgs/purifing_mainvisual_bg.jpg) repeat-x bottom;}
  .sec_mainvisual span {width: 100%; height: 325px; background: url(../imgs/purifing_mainvisual.jpg) no-repeat top right;}


  .sec_stone {justify-content: center;}
  .sec_stone .stone h3 {width: 312px;}


  .list_stone {display: flex; border-left: 1px solid #eee;}
  .list_stone li {width: 25%;text-align:center; border-right: 1px solid #eee;}
  .list_stone li a {display: inline-block; padding: 0 10px;}

}