@charset "utf-8";
/* */

#inmode {
  /* font-size */
  --fs-tiny-l: 1.6rem;
  --fs-tiny: 1.4rem;

  --fs-contents-title: 4.6rem;
  --fs-contents-title-list: 3.6rem;
  --fs-contents-sub-title: 2.4rem;
  --fs-contents-text: 2rem;
  --fs-contents-sub-text: 1.8rem;

  /* font-weight */
  --fw-lg: 800;
  --fw-l: 600;
  --fw-m: 500;
  --fw-s: 400;
  --fw-xs: 300;

  --color-text-01: #4a4d53;
  --color-text-02: #7ba2f1;
  --color-text-03: #fcff69;

  /* point-02 colors */
  --list-color-01: #5986e6;
  --list-sub-color-01: #eef3fc;
  --list-color-02: #db91f1;
  --list-sub-color-02: #fbf4fe;
  --list-color-03: #2551af;
  --list-sub-color-03: #e9edf7;


  line-height: 1.25;
  font-weight: var(--fw-s);
}

.color-black {
  color: black;
}

.color-white {
  color: white;
}

.color-01 {
  color: var(--color-text-01);
}

.color-02 {
  color: var(--color-text-02);
}

.color-03 {
  color: var(--color-text-03);
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-img img {
  width: auto;
  height: 1em;
}

/* contents size */
#inmode .contents-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

#inmode .contents-title {
  font-size: var(--fs-contents-title);
  font-weight: var(--fw-s);
  text-align: center;
}

#inmode .contents-sub-title {
  font-size: var(--fs-contents-sub-title);
  font-weight: var(--fw-s);
  text-align: center;
}

#inmode .contents-title-list {
  font-size: var(--fs-contents-title-list);
  font-weight: var(--fw-xs);
}

#inmode .contents-text {
  font-size: var(--fs-contents-text);
}

#inmode .contents-sub-text {
  font-size: var(--fs-contents-sub-text);
}

#inmode .contents-title-wrapper mark {
  background: linear-gradient(transparent 70%, #d5defc 70%);
  padding: 0 .05em;
}

#inmode .box {
  padding: 10rem 8rem;
}


#inmode #sub-title h1 {
  color: #676f7e;
}

#inmode #sub-title p {
  color: #676f7e;
  font-weight: var(--fw-s);
}

#inmode #sub-title strong i {
  aspect-ratio: 2 / 1;
}

#inmode #sub-title strong::before {
  background-color: #99a6bd;
}


/* page-concern-fat */
#page-concern-fat {
  position: relative;
  z-index: 3;
  background-color: white;
  overflow: hidden;
}

#page-concern-fat figure {
  position: relative;
  margin: 6rem auto auto;
  border-radius: 6rem;
  overflow: hidden;
  width: 50%;
}

#page-concern-fat small {
  position: absolute;
  right: 4rem;
  bottom: 2rem;
  color: #5d5d5d;
  font-weight: var(--fw-s);
  font-size: var(--fs-tiny);
}

/* #page-solution-fat */
#page-solution-fat {
  position: relative;
  z-index: 3;
  background-color: #eff3f7;
  overflow: hidden;
}

#page-solution-fat h2 {
  color: #6c6c6c;
  font-weight: var(--fw-s);
}

#page-solution-fat .contents-list {
  width: 40%;
  margin-inline: auto;
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#page-solution-fat .contents-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  color: white;
  text-align: center;
  border-radius: 50%;
  aspect-ratio: 1 / 1;

}

#page-solution-fat .contents-list li.mini-fx {
  position: relative;
  background-color: rgba(174, 186, 203, 0.7);
  transform: translateX(5%);
  z-index: 1;
}

#page-solution-fat .contents-list li.forma {
  background-color: #99a6bd;
  transform: translateX(-5%);
}

/* page-bna */
#page-bna {
  position: relative;
  z-index: 3;
  background-color: white;
  overflow: hidden;
}

#page-bna .box .contents-title {
  font-weight: var(--fw-lg);
}

#page-bna .box picture {
  display: block;
  margin: 6rem auto auto;
  width: 50%;
}

/* page-principle */
#page-principle {
  position: relative;
  z-index: 3;
  background-color: #f1f1f1;
  overflow: hidden;
}

#page-principle .contents-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 6rem auto auto;
  gap: 6rem;
}

#page-principle .contents-img-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  width: 55%;
}

#page-principle .contents-img-box figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 auto;
}

#page-principle .contents-img-box figure figcaption {
  padding: 1rem;
  border-radius: 1rem;
  text-align: center;
  font-weight: var(--fw-l);
  color: white;
  background-color: #5b606a;
  width: 100%;
}

#page-principle .contents-img-box figure figcaption b {
  color: #fffd55;
}

#page-principle .contents-container p.contents-text {
  text-align: center;
}

#page-principle .contents-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 3rem;
}

#page-principle .contents-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 2.4rem;
  border: 2px dashed #5b606a;
  padding: 2rem 3rem;
  gap: 3rem;
}

#page-principle .contents-list li img {
  max-width: 6rem;
}


/* page-text-sec */
#page-text-sec {
  position: relative;
  z-index: 3;
  background-color: #4a4d53;
  overflow: hidden;
}

#page-text-sec .box {
  color: white;
}

#page-text-sec .box .text-img {
  display: block;
  margin-top: 2rem;
  font-size: 8rem;
}

/* page-promise-time */
#page-promise-time {
  position: relative;
  z-index: 3;
  background-color: #eff0f1;
  overflow: hidden;
}

#page-promise-time .contents-box {
  width: 45%;
  margin: 6rem auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#page-promise-time .contents-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  gap: 1px;
  margin-top: 3rem;
}

#page-promise-time .contents-list li {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
}

#page-promise-time .contents-list li span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: var(--fw-l);
  color: black;
  background-color: #f8f8f8;
}

#page-promise-time .contents-list li span b {
  color: #cb0000;
}

#page-promise-time .contents-list li.table-top span {
  width: 100%;
  padding: 2rem;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  overflow: hidden;
  color: white;
}

#page-promise-time .contents-list li.table-top span:nth-child(1) {
  background-color: #aab7d1;
}

#page-promise-time .contents-list li.table-top span:nth-child(2) {
  background-color: #b4c1db;
}

#page-promise-time .contents-list li.table-bottom span {
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  overflow: hidden;
}

#page-promise-time small {
  color: #5d5d5d;
  font-weight: var(--fw-s);
  font-size: var(--fs-tiny);
  margin-left: auto;
  margin-top: 1.5rem;
}


/* page-two-longmode */
#page-two-longmode {
  position: relative;
  z-index: 3;
  background-color: #b4c1db;
  overflow: hidden;
}

#page-two-longmode .contents-title-list {
  color: white;
}

#page-two-longmode .contents-list {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin: 6rem auto auto;
}

#page-two-longmode .contents-list li {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-block: 3rem;
  border-radius: 2rem;
  overflow: hidden;
  gap: 2rem;
}

#page-two-longmode .contents-list li h3 {
  font-weight: var(--fw-lg);
  margin-bottom: 2rem;
}

#page-two-longmode .contents-list li .tag-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-inline: 1rem;
}

#page-two-longmode .contents-list li .tag-list span {
  padding: 1rem 2rem 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: var(--fw-l);
  text-align: center;
  border-radius: 10rem;
  color: #88a8e8;
  border: 1px solid #88a8e8;
}
#page-two-longmode .contents-list li .tag-list span i {
  display: block;
  transform: scale(1.25);
}
/* page-why-mode */
#page-why-mode {
  position: relative;
  z-index: 3;
  background-color: white;
  overflow: hidden;
}

#page-why-mode .contents-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8rem;
  width: 50%;
  margin: 6rem auto auto;
}

#page-why-mode .inmode-graph {
  position: relative;
}

#page-why-mode .inmode-graph img {
  width: 60%;
  display: block;
  margin: 4rem auto;
}

#page-why-mode .inmode-graph ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

#page-why-mode .inmode-graph ul li {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 50%;
}

#page-why-mode .inmode-graph ul li.left {
  align-items: flex-end;
  transform: translateX(-5rem);
}

#page-why-mode .inmode-graph ul li.left .list-center {
  text-align: left;
  display: block;
  margin-right: auto;
  margin-left: 7rem;
}

#page-why-mode .inmode-graph ul li.right {
  align-items: flex-start;
  transform: translateX(5rem);
}

#page-why-mode .inmode-graph ul li.right .list-center {
  text-align: right;
  display: block;
  margin-left: auto;
  margin-right: 3rem;
}

#page-why-mode .contents-desc {
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
  padding: 4rem 2rem;
  text-align: center;
  color: white;
  background-color: #5b606a;
}

#page-why-mode .contents-desc b {
  color: #fffb87;
  font-weight: var(--fw-lg);
}

/* page-bottom-banner */
#page-bottom-banner {
  position: relative;
  z-index: 3;
  background-color: #dfeafd;
  overflow: hidden;
}
#page-bottom-banner .box {
  padding-block: 0;
}
#page-bottom-banner .contents-title-wrapper {
  position: absolute;
  top: 10rem;
  left: 50%;
  color: #738fb4;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}

#page-bottom-banner .contents-title-wrapper .text-img {
  font-size: 6rem;
}

@media (max-width: 1024px) {
  #page-bottom-banner .box {
    padding: 0;
  }
}
@media (max-width: 768px) {

  #page-special,
  #page-paincare,
  #sub-faq-latest {padding: 0; margin-top: 0;}

  #inmode #sub-title h1,
  #inmode #sub-title p {
    color: white;
  }

  #breadcrumbs {
    z-index: 4;
  }

  #inmode {
    --fs-contents-title: 3.6rem;
  }
  #inmode .box {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 8rem 4rem;
  }

  #inmode .basics-list ul {
    flex-direction: column;
    gap: 2rem;
  }

  #inmode .basics-list ul li .content .step {
    transform: translate(-50%, 50%) rotate(90deg);
  }

  #inmode .basics-point {
    padding: 3rem;
  }


  #page-concern-fat figure {
    width: 100%;
    margin: 4rem auto auto;
    border-radius: 3rem;
  }

  #page-solution-fat .contents-list {
    width: 100%;
  }


  #page-bna .box picture {
    width: 100%;
    margin: 4rem auto auto;
  }
  #page-principle .contents-container {
    gap: 4rem;
    margin: 4rem auto auto;
  }

  #page-principle .contents-img-box {
    width: 100%;
    gap: 1.5rem;
  }

  #page-principle .contents-img-box figure {
    gap: 1rem;
  }

  #page-principle .contents-list {
    gap: 1.5rem;
  }

  #page-principle .contents-list li {
    gap: 1.5rem;
    text-align: center;
    padding: 1rem 2rem;
  }

  #page-principle .contents-list li img {
    width: 40%;
  }

  #page-promise-time .contents-box {
    width: 100%;
  }

  #page-two-longmode .contents-list {
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
    margin: 4rem auto auto;
    gap: 1.5rem;
  }

  #page-why-mode .contents-box {
    gap: 4rem;
    width: 100%;
    margin: 4rem auto auto;
  }

  #page-why-mode .inmode-graph ul li.right .list-center {
    margin-left: auto;
    margin-right: 7rem;
    text-align: center;
  }
  #page-why-mode .inmode-graph ul li.left .list-center {margin-left: 5rem;}


  #page-bottom-banner .contents-title-wrapper {
    top: 6rem;
  }
  #page-bottom-banner .box {
    padding: 0;
  }
}

@media (max-width: 320px) {
  br.block {display: none !important;}
  #page-why-mode .inmode-graph ul li.left { transform: translateX(-7rem); }
  #page-why-mode .inmode-graph ul li.right { transform: translateX(7rem); }

  #page-principle .contents-img-box { grid-template-columns: repeat(1, 1fr); }
  #page-principle .contents-list { width: 100%; grid-template-columns: repeat(1, 1fr);  grid-template-rows: repeat(3, 1fr);}
  #page-principle .contents-list li {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    justify-items: center;
    border-radius: 1.4rem;
  }
  #page-principle .contents-list li img { width: 4rem; margin-left: auto;}
  #page-principle .contents-list li b { margin-right: auto; }
}