@charset "utf-8";
/*
* arrangeorder.css
*
* version --- 1.0
* updated --- 2021/03/22
*/

.flexBox2,
.spflexBox2 {
  display: flex;
}

.flexBox2 .flex {
  width: 49%;
}

.flexBox2 .flex:nth-child(2n),
.spflexBox2 .flex:nth-child(2n) {
  margin-left: 2%;
}

.flexBox3 {
  display: flex;
  /* min-width: 750px; */
}

.flexBox3 .flex {
  width: calc((100% - 40px) / 3);
  padding-left: 40px;
}

.flex.batsu {
  position: relative;
}

.flexBox3 .flex.batsu::before {
  background-image: url(/cmdty/colorstone/img/batsu.svg);
  background-size: contain;
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  left: 5px;
  top: 27%;
}

.spflexBox2 .img {
  max-width: 186px;
  width: 30%;
  margin-right: 18px;
}

.spflexBox2 .txt {
  width: 68%;
}

.cover {
  border: 1px solid #dbdbdb;
}

#colorstone .diyRole .hdM {
  margin-bottom: 30px;
}

#colorstone p {
  font-size: 14px;
}

#colorstone .twoline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#colorstone .twoline .button {
  flex: 0 50%;
  padding: 0 5px;
  box-sizing: border-box;
  margin: 0;
  margin-bottom: 10px;
}

#colorstone .twoline .button a {
  margin: 0;
}

.bg {
  background-color: #f9f9f9;
  padding: 5%;
}

.bg .aboutMarin185 {
  padding: 5% !important;
  background-color: #fff;
}

.mt20 {
  margin-top: 20px !important;
}

.overflow {
  /* overflow-x: scroll; */
}

.hdS {
  font-size: 15px;
}

.slide2 li,
.slide3 li {
  padding: 0 10px;
  box-sizing: border-box;
}

.slick-slider .slick-prev,
.slick-slider .slick-next {
  z-index: 10;
  top: initial;
  bottom: -31px;
}

.slick-slider .slick-next {
  right: 25%;
}

.slick-slider .slick-next:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: solid 2px #4b4b4b;
  border-top: solid 2px #4b4b4b;
  transform: rotate(45deg);
}
.slick-slider .slick-prev {
  left: 25%;
}

.slick-slider {
  padding-bottom: 0px;
}

.slide2 li,
.slide3 li {
  padding: 0 10px;
  box-sizing: border-box;
}

.slick-slider .slick-prev,
.slick-slider .slick-next {
  z-index: 10;
  top: initial;
  bottom: -31px;
}

.slick-slider .slick-next {
  right: 25%;
}

.slick-slider .slick-prev {
  left: 25%;
}

.slick-slider .slick-prev:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-left: solid 2px #4b4b4b;
  border-bottom: solid 2px #4b4b4b;
  transform: rotate(45deg);
}

.slick-dots {
  bottom: -22px;
}

.slick-dotted.slick-slider {
  margin-bottom: 30px;
  padding-bottom: 15px;
}

@media screen and (min-width: 960px) {
  .slick-slider .slick-next {
    right: 30%;
  }

  .slick-slider .slick-prev {
    left: 30%;
  }

  .slick-dots {
    bottom: -20px;
  }

  .cover .aboutMarin185 {
    max-width: 920px;
    margin: auto;
    padding: 50px 15px !important;
  }

  .mainBlock {
    max-width: 1110px;
  }

  .secBlock {
    max-width: 1000px;
  }

  .topLayout.width02.mainBlock .cover .topLayout_img {
    width: 39.25%;
  }

  .topLayout.width02.mainBlock .cover .topLayout_box {
    padding-left: 37px;
    width: 63.75%;
  }

  .topLayout.width02.secBlock .topLayout_img {
    width: 50.25%;
  }

  .topLayout.width02.secBlock .topLayout_box {
    padding-left: 30px;
  }

  h3.hdM {
    font-size: 18px;
  }

  .mainImg {
    margin-top: 50px;
  }

  /* .bgImg .topLayout_img {
visibility: hidden;
} */

  .bgImg {
    background-repeat: no-repeat;
    background-size: contain;
  }

  .bgImg#od {
    background-image: url(/cmdty/colorstone/img/od_s.jpg);
    min-height: 425px;
    background-position: right bottom;
  }

  .bgImg#sel {
    background-image: url(/cmdty/colorstone/img/sel_kv.jpg);
    min-height: 485px;
    background-position: left 60px;
    background-size: unset;
    padding-top: 60px;
    margin-top: -60px;
  }

  .bgImg .topLayout_box {
    padding: 0 !important;
    width: 44% !important;
  }

  #colorstone .shopRole_display .swiper-slide {
    width: 270px;
    margin-right: 40px;
  }

  #colorstone .shopRole_display .swiper-slide img {
    border: 1px solid #dedede;
  }

  #colorstone .swiper-slide .noteStyle {
    font-size: 12px;
  }

  #colorstone .twoline {
    max-width: 720px;
    margin: 0 auto;
  }

  .topLayout.width02 .bg .topLayout_box {
    padding-left: 35px;
    width: 54%;
  }
}

@media screen and (max-width: 959px) {
  .cover {
    padding: 30px 5% 50px;
  }

  .slick-dotted.slick-slider {
    margin-bottom: 40px;
    padding-bottom: 10px;
  }

  #colorstone .noteStyle {
    font-size: 12px;
  }

  h3.hdM {
    font-size: 16px;
  }

  #colorstone .diyRole .hdM {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  #colorstone .diyRole h1.hdM {
    margin-top: 0;
  }

  .bg .aboutMarin185 {
    padding: 30px 5% !important;
  }

  .mt-70 {
    margin-top: -70px;
  }

  .mt30-s {
    margin-top: 30px !important;
  }

  .layoutRole_main {
    padding-top: 25px;
  }
}

@media screen and (max-width: 700px) {
  .flexBox2 {
    flex-wrap: wrap;
  }

  .flexBox2 .flex {
    width: 100%;
  }

  .flexBox2 .flex:nth-child(2n) {
    margin-left: 0%;
    margin-top: 20px;
  }

  .spflexBox2 .hdS {
    margin-bottom: 5px;
    font-size: 14px;
  }

  #colorstone .spflexBox2 p {
    font-size: 12px;
    line-height: 1.6;
  }

  .bgImg#sel {
    padding-top: 60px;
    margin-top: -60px;
  }

  .spflexBox2 .img {
    margin-right: 13px;
  }
  .overflow {
    /* */
    border: 1px solid #dedede;
    margin: auto 5%;
  }
  .flexBox3 {
    display: block;
  }
  .flexBox3 .flex {
    width: 100%;
    padding-left: 0;
    padding: 20px;
  }
  .flex.batsu {
    position: relative;
    padding-top: 50px;
    margin-top: 0px;
  }
  .flexBox3 .flex.batsu::before {
    left: 0;
    top: 0;
    bottom: auto;
    right: 0;
    margin: auto;
  }
}