@charset "UTF-8";
/* CSS Document */
/* 基本設定 */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 初期設定 */
#sv {
  background-image: url(../img/faq/faq-sv@2x.webp);
}

#sv.sv-sports {
  background-image: url(../img/info/sv-sports@2x.webp);
}

#sv.sv-rihabili {
  background-image: url(../img/info/sv-riha@2x.webp);
}

#sv.sv-kotsuso {
  background-image: url(../img/info/sv-kotsuso@2x.webp);
}

#sv.sv-rheumati {
  background-image: url(../img/info/sv-rheumati@2x.webp);
}

#sv.sv-neck {
  background-image: url(../img/info/sv-neck@2x.webp);
}

#sv.sv-hand {
  background-image: url(../img/info/sv-hand@2x.webp);
}

#sv.sv-back {
  background-image: url(../img/info/sv-back@2x.webp);
}

#sv.sv-foot {
  background-image: url(../img/info/sv-foot@2x.webp);
}

.submidashi > h3 {
   font-weight:500;
	margin-top:1rem;
}

#infoArea .midashiBox {
  width: 100%;
  position: relative;
  font-size: 1.8rem;
  line-height: 1.9444444444;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin-bottom: 8em;
}
@media screen and (max-width: 840px) {
  #infoArea .midashiBox {
    font-size: 1.6rem;
    line-height: 1.875;
    letter-spacing: 0.1em;
    font-weight: 400;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .midashiBox {
    font-size: 1.4rem;
    line-height: 1.9285714286;
    letter-spacing: 0.1em;
    font-weight: 400;
  }
}
#infoArea .midashiBox .flexBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 5%;
  margin-top: 5em;
}
@media screen and (max-width: 520px) {
  #infoArea .midashiBox .flexBox {
    flex-wrap: wrap;
    margin-top: 4em;
    flex-direction: column-reverse;
  }
}
#infoArea .midashiBox .flexBox .flexL {
  width: 55%;
}
@media screen and (max-width: 520px) {
  #infoArea .midashiBox .flexBox .flexL {
    width: 100%;
    padding-top: 2em;
  }
}
#infoArea .midashiBox .flexBox .flexL > h3 {
  font-size: 166%;
  line-height: 1.75;
  font-weight: 600;
}
@media screen and (max-width: 520px) {
  #infoArea .midashiBox .flexBox .flexL > h3 {
    font-size: 139%;
  }
}
#infoArea .midashiBox .flexBox .flexL > p {
  margin-top: 2em;
}
#infoArea .midashiBox .flexBox .flexR {
  width: 50%;
  padding-top: 0.7em;
}
@media screen and (max-width: 520px) {
  #infoArea .midashiBox .flexBox .flexR {
    width: 100%;
    padding-top: 0em;
  }
}
#infoArea .midashiBox .flexBox .flexR > img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.2em;
}
#infoArea .consulBox {
  width: 100%;
  background-color: #e1f7ff;
  position: relative;
}
#infoArea .consulBox .flexBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
  padding: 7em 0;
  z-index: 2;
}
#infoArea .consulBox .flexBox .flexL {
  width: fit-content;
  position: relative;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 300;
}
@media screen and (max-width: 520px) {
  #infoArea .consulBox .flexBox .flexL {
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 300;
  }
}
#infoArea .consulBox .flexBox .flexL .ttlBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
}
#infoArea .consulBox .flexBox .flexL .ttlBox > .enTxt {
  transform-origin: top;
  transform: rotate(90deg) translateX(50%);
  display: inline-block;
  position: absolute;
  top: 0;
  left: -0.7em;
  padding-left: 1.3em;
  color: #224d5c;
}
#infoArea .consulBox .flexBox .flexL .ttlBox > .enTxt::before {
  content: "";
  display: block;
  width: 1.3em;
  aspect-ratio: 1;
  background: url(../img/common/ico-news.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: 50% auto auto 0;
  transform: translateX(50%);
  rotate: 270deg;
  filter: brightness(0) saturate(100%) invert(23%) sepia(28%) saturate(1017%) hue-rotate(149deg) brightness(95%) contrast(85%);
}
#infoArea .consulBox .flexBox .flexL .ttlBox > h2 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin: 0;
  line-height: 1;
  font-size: 150%;
  font-weight: 600;
}
#infoArea .consulBox .flexBox .flexL .ttlBox::before {
  content: "";
  display: block;
  width: 5.5em;
  aspect-ratio: 1;
  background: url(../img/info/info-nayami.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: 0 auto auto 0;
  transform: translateY(-35%) translateX(-25%);
  z-index: -1;
}
@media screen and (max-width: 520px) {
  #infoArea .consulBox .flexBox .flexL .ttlBox::before {
    width: 4em;
  }
}
#infoArea .consulBox .flexBox .flexR {
  width: 88%;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 520px) {
  #infoArea .consulBox .flexBox .flexR {
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
    display: grid;
    place-items: end;
  }
}
#infoArea .consulBox .flexBox .flexR .consulList {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 4em;
}
@media screen and (max-width: 520px) {
  #infoArea .consulBox .flexBox .flexR .consulList {
    width: 90%;
    align-items: flex-end;
    row-gap: 3em;
  }
}
#infoArea .consulBox .flexBox .flexR .consulList .consulItem {
  width: calc((100% - 4em) / 3);
  position: relative;
}
@media screen and (max-width: 840px) {
  #infoArea .consulBox .flexBox .flexR .consulList .consulItem {
    width: calc((100% - 2em) / 2);
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .consulBox .flexBox .flexR .consulList .consulItem {
    width: 100%;
  }
}
#infoArea .consulBox .flexBox .flexR .consulList .consulItem .imgBox {
  border-radius: 1.5rem;
  overflow: hidden;
}
@media screen and (max-width: 840px) {
  #infoArea .consulBox .flexBox .flexR .consulList .consulItem .imgBox {
    border-radius: 1rem;
  }
}
#infoArea .consulBox .flexBox .flexR .consulList .consulItem .imgBox > img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#infoArea .consulBox .flexBox .flexR .consulList .consulItem > p {
  margin-top: 0.8em;
}
#infoArea .commonBox {
  width: 100%;
  position: relative;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-top: 8em;
}
@media screen and (max-width: 840px) {
  #infoArea .commonBox {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .commonBox {
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
}
#infoArea .commonBox .ttlBox::before {
  content: "";
  display: block;
  width: 150%;
  aspect-ratio: 305/5;
  background: url(../img/info/info-scl.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: auto auto -1.2em 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 840px) {
  #infoArea .commonBox .ttlBox::before {
    width: 140%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .commonBox .ttlBox::before {
    width: 130%;
  }
}
#infoArea .commonBox .commonList {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 1em;
  margin: 4em 0;
  gap: 1em 2em;
}
#infoArea .commonBox .commonList > a {
  display: block;
  width: calc((100% - 4em) / 3);
  padding: 1.3em 1.5em;
  position: relative;
  background-color: #fff;
  border-radius: 999px;
  border: 0.1em solid #ededed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
@media screen and (max-width: 840px) {
  #infoArea .commonBox .commonList > a {
    width: calc((100% - 2em) / 2);
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .commonBox .commonList > a {
    width: 100%;
  }
}
#infoArea .commonBox .commonList > a > img {
  width: 2rem;
  aspect-ratio: 20/17;
  margin-top: 0.1em;
}
#infoArea .commonBox .commontxt {
  margin: 0 5rem;
  font-size: 1.8rem;
  line-height: 1.7777777778;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
}
@media screen and (max-width: 840px) {
  #infoArea .commonBox .commontxt {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.1em;
    font-weight: 400;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .commonBox .commontxt {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.7142857143;
    letter-spacing: 0.1em;
    font-weight: 400;
  }
}
#infoArea .commonBox .commontxt .comTxtBox {
  padding: 4em 6.5em;
  position: relative;
}
@media screen and (max-width: 840px) {
  #infoArea .commonBox .commontxt .comTxtBox {
    padding: 4em 2em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #infoArea .commonBox .commontxt .comTxtBox {
    padding: 5em 0;
  }
}
#infoArea .commonBox .commontxt .comTxtBox > h4 {
  font-size: 166%;
  line-height: 1;
  font-weight: 600;
  position: relative;
}
@media screen and (max-width: 520px) {
  #infoArea .commonBox .commontxt .comTxtBox > h4 {
    font-size: 140%;
    margin-left: 1.6em;
  }
}
#infoArea .commonBox .commontxt .comTxtBox > h4::before {
  content: "";
  display: block;
  width: 1.3em;
  aspect-ratio: 1;
  background: url(../img/info/info-plus.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: 50% auto auto -1.7em;
  transform: translateY(-50%);
}
#infoArea .commonBox .commontxt .comTxtBox > p {
  margin-top: 1.3em;
}
#infoArea .commonBox .commontxt .comTxtBox::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  border-bottom: 1px solid #cbcbcb;
  position: absolute;
  bottom: 0;
  left: 0;
}
#infoArea .commonBox .commontxt .comTxtBox:last-child::before {
  display: none;
}
#infoArea .commonBox .commontxt .comTxtBox:nth-child(even) h4::before {
  filter: brightness(0) saturate(100%) invert(75%) sepia(73%) saturate(2599%) hue-rotate(360deg) brightness(106%) contrast(103%);
}

/* ----------------------------------------------------------------------
ページ別パーツ
---------------------------------------------------------------------- */
.marT {
  margin-top: 6em;
}

#infoArea .commonBox .commonList.commonList02 {
  justify-content: center;
  gap: 2em;
}

#infoArea .consulBox .flexBox .flexR .consulList .consulItem.consulItem02 {
  width: calc((100% - 3em) / 2);
}
@media screen and (max-width: 520px) {
  #infoArea .consulBox .flexBox .flexR .consulList .consulItem.consulItem02 {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------
一覧パーツ
---------------------------------------------------------------------- */
.infoBox .ttlBox::before {
  content: "";
  display: block;
  width: 150%;
  aspect-ratio: 305/5;
  background: url(../img/info/info-scl.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: auto auto -1.2em 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 840px) {
  .infoBox .ttlBox::before {
    width: 140%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  .infoBox .ttlBox::before {
    width: 130%;
  }
}
.infoBox .infoList {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 1em;
  margin: 4em 0;
  gap: 1em 2em;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 600;
}
@media screen and (max-width: 840px) {
  .infoBox .infoList {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 600;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  .infoBox .infoList {
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
    gap: 1em;
  }
}
.infoBox .infoList > a {
  display: block;
  width: calc((100% - 4em) / 3);
  padding: 1.3em 1.5em;
  position: relative;
  background-color: #fff;
  border-radius: 999px;
  border: 0.1em solid #ededed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
@media screen and (max-width: 840px) {
  .infoBox .infoList > a {
    width: calc((100% - 2em) / 2);
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  .infoBox .infoList > a {
    width: calc((100% - 1em) / 2);
    padding: 1.2em;
  }
}
.infoBox .infoList > a > img {
  width: 2rem;
  aspect-ratio: 20/17;
  margin-top: 0.1em;
  transform: rotate(-90deg);
  filter: brightness(0) saturate(100%) invert(77%) sepia(77%) saturate(3023%) hue-rotate(356deg) brightness(113%) contrast(104%);
}
@media screen and (max-width: 520px) {
  .infoBox .infoList > a > img {
    width: 1.5rem;
  }
}