@charset "utf-8";

/*------------------------------------------------
   さ～ら式　逆転療法
------------------------------------------------*/

/* こんな効果が期待できます！
****************************************/

#gyakuten {
  width: 100%;
}

#gyakuten .contentsBlock {
  width: 100%;
}

.gyakutenBlock {
  width: 100%;
}

.gyakutenBox {
  width: 100%;
}

.gyakutenBox .imageBlock {
  margin-bottom: 20px;
}

.gyakutenBox .image {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.gyakutenBox .image img {
  width: 100%;
  height: auto;
}

.gyakutenBox .textBlock {
  padding-left: 20px;
}

.gyakutenBox .gyakutenList {
	list-style: none;
  margin-bottom: 20px;
}

.gyakutenBox .gyakutenList li {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
}

.gyakutenBox .gyakutenList li::before {
  content: '\f14a';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4em;
  font-size: 1.5em;
}

.gyakutenBox .note {
  font-size: 1.4rem;
  line-height: 1.5;
  display: flex;
  margin-bottom: 4px;
}

.gyakutenBox .note span {
	margin-right: 0.4em;
	font-size: 1em;
}

@media print, screen and (min-width: 601px) {

  .gyakutenBlock {
    width: 940px;
    margin: 0 auto;
  }

  .gyakutenBox {
    display: flex;
    align-items: center;
  }

  .gyakutenBox .imageBlock {
    width: 40%;
    margin-bottom: 0;
  }

  .gyakutenBox .textBlock {
    width: 60%;
    padding-left: 40px;
  }

  .gyakutenBox .gyakutenList {
  }

  .gyakutenBox .gyakutenList li::before {
    margin-right: 0.4em;
  }

}

/* さ～ら式 逆転療法を試してみませんか？
****************************************/

#trial {
  width: 100%;
}

#trial .contentsBlock {
  width: 100%;
}

.trialBlock {
  width: 100%;
}

.trialSlider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.trialSlider li {
  border-radius: 10px;
  overflow: hidden;
}

.trialSlider li.slide01,
.trialSlider li.slide03,
.trialSlider li.slide06,
.trialSlider li.slide09,
.trialSlider li.slide11 {
  width: 180px;
}

.trialSlider li.slide05,
.trialSlider li.slide12 {
  width: 180px;
}

.trialSlider li.slide02,
.trialSlider li.slide07,
.trialSlider li.slide10 {
  width: 200px;
}

.trialSlider li.slide04,
.trialSlider li.slide08 {
  width: 300px;
}

.trialSlider img {
  width: 100%;
  height: auto;
}

.trialSlider .slick-slide {
  margin: 0 5px;
}

.trialSlider .slick-track {
  display: flex !important;
	align-items: center !important;
}

@media print, screen and (min-width: 601px) {

  .trialBlock {
    width: 800px;
    margin: 0 auto;
  }
  
  .trialSlider {
    width: 1200px;
    margin-left: 0;
  }

  .trialSlider .slick-slide {
    margin: 0 10px;
  }

}

@media print, screen and (min-width: 1201px) {

  .trialSlider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .trialSlider .slick-slide {
    margin: 0 15px;
  }

}