/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */


.c-breadcrumb{
  display: none;
}

.js-fadeIn {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1500ms;
}

.js-fadeIn.js-scrollIn {
  opacity: 1;
  transform: translate(0, 0);
}

/* first view setting for slick */
.item-slider {
  opacity: 0;
  transition: opacity .3s linear;
}

.item-slider.slick-initialized {
  opacity: 1;
}

/* =====================================
    * setting for base style    *
    *               of the page *
===================================== */
.main-area img, .main_inner img {
  width: 100%;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul, li {
  list-style: none;
}

/* for responsive objects */
main .sp-component {
  display: block;
}

main .pc-component {
  display: none;
}

@media only screen and (min-device-width: 560px) {
  main .sp-component {
    display: none;
  }
  main .pc-component {
    display: block;
  }
}

/* ===============================================
    ! Layout !
=============================================== */
/* ===============================================
    ! Object !
=============================================== */
/* =====================================
    *  Style of SP *
===================================== */
.heading {
  display: block;
  padding-top: calc(200 * (100vw / 750));
  text-align: center;
}

.heading-txt {
  font-size: calc(44 * (100vw / 750));
  font-weight: bold;
  line-height: 1.5;
}

.heading .desc-txt {
  font-size: calc(25 * (100vw / 750));
  font-weight: 400;
  line-height: 1.6;
  margin-top: calc(65 * (100vw / 750));
  padding: 0 calc(100 * (100vw / 750));
  text-align: center;
}

.heading .desc-txt .paragraph {
  display: block;
  margin-bottom: calc(40 * (100vw / 750));
}

/* common style of each section */
.title-txt {
  font-size: calc(34 * (100vw / 750));
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

.desc-txt {
  font-size: calc(25 * (100vw / 750));
  font-weight: 400;
  line-height: 1.6;
  text-align: justify;
}

.sec-style {
  display: block;
  margin: calc(140 * (100vw / 750)) auto 0;
}

.sec-style .desc-txt {
  margin-top: calc(46 * (100vw / 750));
}

.isActive {
  display: block;
}

/* style of howtouse */
.howtouse {
  background-color: #f8f8f8;
  padding: calc(40 * (100vw / 750)) 0;
}

.howtouse__btn {
  display: flex;
  justify-content: center;
  margin: calc(50 * (100vw / 750)) auto 0;
}

.howtouse__btn > li {
  background-color: var(--color-white);
  border: solid 1px var(--color-lightgray);
  border-radius: 10px;
  color: var(--color-lightgray);
  font-size: calc(20 * (100vw / 750));
  font-weight: 500;
  text-align: center;
  width: calc(250 * (100vw / 750));
}

.howtouse__btn .isActive {
  border: solid 2px var(--color-black);
  color: var(--color-black);
  font-weight: bold;
}

.howtouse__btn--mybody {
  line-height: calc(110 * (100vw / 750));
  margin-right: calc(90 * (100vw / 750));
}

.howtouse__btn--myitem {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}

.howtouse__content {
  background-color: var(--color-white);
  border-radius: 6px;
  margin: calc(48 * (100vw / 750)) auto 0;
  padding: calc(55 * (100vw / 750)) 0 calc(20 * (100vw / 750));
  width: calc(700 * (100vw / 750));
}

.howtouse__content figure > img {
  display: block;
  height: auto;
  margin: calc(50 * (100vw / 750)) auto 0;
  width: calc(470 * (100vw / 750));
}

.howtouse__content--mybody, .howtouse__content--myitem {
  display: none;
  height: 100%;
}

.howtouse__content .isActive {
  display: block !important;
}

.howtouse__content .title-txt {
  padding: 0 calc(20 * (100vw / 750));
}

.howtouse__content .desc-txt {
  padding: 0 calc(30 * (100vw / 750));
}

/* howtouse__content--mybody */
.compare-to-mybody {
  height: 100%;
}

/* howtouse__content--myitem */
.wayto__btn {
  display: flex;
  justify-content: center;
  border-bottom: solid 1px var(--color-lightgray);
  margin-bottom: calc(40 * (100vw / 750));
}

.wayto__btn > li {
  background-color: var(--color-white);
  color: var(--color-lightgray);
  font-size: calc(26 * (100vw / 750));
  font-weight: 500;
  text-align: center;
}

.wayto__btn .isActive {
  border-bottom: solid 2px var(--color-black);
  color: var(--color-black);
  font-weight: bold;
}

.wayto__btn--history, .wayto__btn--brand {
  margin-right: calc(40 * (100vw / 750));
}

.wayto__content {
  background-color: var(--color-white);
  margin: calc(48 * (100vw / 750)) auto 0;
  width: calc(700 * (100vw / 750));
}

.wayto__content figure > img {
  display: block;
  height: auto;
  margin: calc(50 * (100vw / 750)) auto 0;
  width: calc(470 * (100vw / 750));
}

.wayto__content .isActive {
  display: block !important;
}

.wayto--history, .wayto--brand, .wayto--measure {
  display: none;
  height: 100%;
}

/* for slick */
.slick-dots {
  margin: calc(20 * (100vw / 750)) auto 0 !important;
  padding-bottom: calc(20 * (100vw / 750));
  width: 100%;
}

/* style of account */
.account-img--top, .account-img--bottom {
  margin: calc(60 * (100vw / 750)) auto 0;
  width: calc(628 * (100vw / 750));
}

/* style of help */
.help-img {
  margin: calc(60 * (100vw / 750)) auto 0;
  width: calc(628 * (100vw / 750));
}

/* style of notes */
.notes {
  margin-bottom: calc(120 * (100vw / 750));
}

.notes .desc-txt {
  padding: 0 calc(26 * (100vw / 750));
}