@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/*----------------------------------------
サイト共通 スタイルシート
----------------------------------------*/
@media screen and (max-width: 899px) {
  .pageHeader {
    background: url(images/pageMainImg.jpg) no-repeat right 30% center/auto 100%;
  }
}
@media screen and (min-width: 590px) {
  .pageHeader {
    background: url(images/pageMainImg.jpg) no-repeat right center/cover;
  }
}

/*  共通
	・信頼と危機と充実したサポート体制
	・利用者にとって安全・安心であること
---------------------------------------------- */
@media screen and (max-width: 899px) {
  .featureContents + .featureContents {
    margin-top: 80px;
  }
}
@media screen and (min-width: 900px) {
  .featureContents + .featureContents {
    margin-top: 192px;
  }
}

.featureContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 899px) {
  .featureContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
}
@media screen and (min-width: 900px) {
  .featureContainer {
    gap: 2.9%;
  }
}
@media screen and (min-width: 900px) {
  .featureContainer.imageRight {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media screen and (min-width: 900px) {
  .featureContainer.imageLeft {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
@media screen and (min-width: 900px) {
  .featureContainer .textArea {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media screen and (min-width: 900px) {
  .featureContainer .imageArea {
    width: 29%;
  }
}
.featureContainer .imageArea .image {
  border-radius: 16px;
  overflow: hidden;
}

/* フレイルマシーン®導入で期待できること
---------------------------------------------- */
@media screen and (max-width: 899px) {
  #expectations {
    margin-top: 72px;
  }
}
@media screen and (min-width: 900px) {
  #expectations {
    margin-top: 144px;
  }
}
@media screen and (min-width: 590px) {
  #expectations .expectationsList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
@media screen and (min-width: 1280px) {
  #expectations .expectationsList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
#expectations .expectationsList .expectationsListItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  aspect-ratio: 1/1;
}
#expectations .expectationsList .expectationsListItem::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 8px solid #EEEEEE;
  border-radius: 50%;
  z-index: 0;
  mix-blend-mode: multiply;
}
@media screen and (min-width: 590px) {
  #expectations .expectationsList .expectationsListItem.categoryCare {
    margin-right: -2%;
    margin-bottom: -2%;
  }
}
@media screen and (min-width: 1280px) {
  #expectations .expectationsList .expectationsListItem.categoryCare {
    margin-right: -4%;
  }
}
#expectations .expectationsList .expectationsListItem.categoryCare::before {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(188, 203, 251, 0.8)), to(rgba(164, 230, 228, 0.8)));
  background-image: linear-gradient(90deg, rgba(188, 203, 251, 0.8), rgba(164, 230, 228, 0.8));
}
@media screen and (max-width: 589px) {
  #expectations .expectationsList .expectationsListItem.categoryHospital {
    margin-top: -4%;
  }
}
@media screen and (min-width: 590px) {
  #expectations .expectationsList .expectationsListItem.categoryHospital {
    margin-left: -2%;
    margin-bottom: -2%;
  }
}
@media screen and (min-width: 1280px) {
  #expectations .expectationsList .expectationsListItem.categoryHospital {
    margin-right: -2%;
    margin-left: -2%;
  }
}
#expectations .expectationsList .expectationsListItem.categoryHospital::before {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(125, 226, 219, 0.8)), to(rgba(203, 245, 118, 0.8)));
  background-image: linear-gradient(90deg, rgba(125, 226, 219, 0.8), rgba(203, 245, 118, 0.8));
}
@media screen and (max-width: 589px) {
  #expectations .expectationsList .expectationsListItem.categoryTreatment {
    margin-top: -4%;
  }
}
@media screen and (min-width: 590px) {
  #expectations .expectationsList .expectationsListItem.categoryTreatment {
    margin-right: -2%;
    margin-top: -2%;
  }
}
@media screen and (min-width: 1280px) {
  #expectations .expectationsList .expectationsListItem.categoryTreatment {
    margin-right: -2%;
    margin-left: -2%;
  }
}
#expectations .expectationsList .expectationsListItem.categoryTreatment::before {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(2%, rgba(192, 233, 95, 0.8)), to(rgba(238, 229, 157, 0.8)));
  background-image: linear-gradient(90deg, rgba(192, 233, 95, 0.8) 2%, rgba(238, 229, 157, 0.8));
}
@media screen and (max-width: 589px) {
  #expectations .expectationsList .expectationsListItem.categoryFacility {
    margin-top: -4%;
  }
}
@media screen and (min-width: 590px) {
  #expectations .expectationsList .expectationsListItem.categoryFacility {
    margin-top: -2%;
    margin-left: -2%;
  }
}
@media screen and (min-width: 1280px) {
  #expectations .expectationsList .expectationsListItem.categoryFacility {
    margin-left: -4%;
  }
}
#expectations .expectationsList .expectationsListItem.categoryFacility::before {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(2%, rgba(250, 209, 189, 0.8)), to(rgba(222, 164, 230, 0.8)));
  background-image: linear-gradient(90deg, rgba(250, 209, 189, 0.8) 2%, rgba(222, 164, 230, 0.8));
}
#expectations .expectationsList .expectationsListItem .title {
  position: relative;
  color: #FFFFFF;
  font-size: 1.3em;
  font-weight: bold;
}
#expectations .expectationsList .expectationsListItem .image {
  position: relative;
  width: 27%;
}
#expectations .expectationsList .expectationsListItem .text {
  position: relative;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  height: 3.6em;
  margin-top: 0.5em;
}

/* フレイル予防がもたらす社会的効果
---------------------------------------------- */
@media screen and (max-width: 899px) {
  #effect {
    margin-top: 80px;
  }
}
@media screen and (min-width: 900px) {
  #effect {
    margin-top: 144px;
  }
}
#effect .effectLeadContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.4%;
}
#effect .effectLeadContainer .text {
  color: var(--colorTextSub);
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 899px) {
  #effect .effectLeadContainer .text {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 900px) {
  #effect .effectLeadContainer .text {
    font-size: 2.2em;
  }
}
@media screen and (max-width: 899px) {
  #effect .effectLeadContainer .image {
    width: 24%;
    max-width: 160px;
  }
}
@media screen and (min-width: 900px) {
  #effect .effectLeadContainer .image {
    width: 14%;
  }
}
#effect .effectList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media screen and (max-width: 899px) {
  #effect .effectList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
    margin-top: 32px;
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList {
    gap: 16px;
    margin-top: 56px;
  }
}
#effect .effectList .effectListItem {
  position: relative;
  background-color: #EFE2E8;
  border-radius: 16px;
  overflow: hidden;
}
@media screen and (max-width: 899px) {
  #effect .effectList .effectListItem {
    padding: 72px 16px 40px;
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem {
    width: calc((100% - 32px) / 3);
    padding: 129px 2% 64px;
  }
}
#effect .effectList .effectListItem .number {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  color: #FFFFFF;
  font-family: var(--fontEN);
  font-weight: 500;
  line-height: 1;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
  margin-right: auto;
  padding: 0.6em 0.8em;
  background-color: var(--colorSub);
  -webkit-box-shadow: 0.1em 0.1em 0 0 rgb(235, 156, 191);
          box-shadow: 0.1em 0.1em 0 0 rgb(235, 156, 191);
}
@media screen and (max-width: 899px) {
  #effect .effectList .effectListItem .number {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem .number {
    font-size: 2em;
  }
}
#effect .effectList .effectListItem .title {
  width: 100%;
  color: var(--colorTextSub);
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
}
#effect .effectList .effectListItem .text {
  margin-top: 1.7em;
  line-height: 1.7;
}
#effect .effectList .effectListItem.decrease {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 899px) {
  #effect .effectList .effectListItem.decrease {
    gap: 16px;
  }
}
#effect .effectList .effectListItem.decrease .arrow {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
@media screen and (max-width: 899px) {
  #effect .effectList .effectListItem.decrease .arrow {
    width: 40px;
    height: 40px;
    margin-left: 4em;
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem.decrease .arrow {
    margin-left: auto;
    margin-right: auto;
  }
}
#effect .effectList .effectListItem.decrease .arrow::before {
  width: 25px;
  height: 5px;
  background-color: #878787;
}
#effect .effectList .effectListItem.decrease .arrow::after {
  width: 25px;
  height: 25px;
  left: 10px;
  border-top: 5px solid #878787;
  border-right: 5px solid #878787;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #effect .effectList .effectListItem.decrease .title br {
    display: none;
  }
}
#effect .effectList .effectListItem.decrease .title:nth-of-type(1)::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(./images/effectListItem_decrease.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 589px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(1)::before {
    width: 112px;
    height: 95px;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(1)::before {
    width: 120px;
    height: 102px;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(1)::before {
    width: 42%;
    max-width: 160px;
    padding-top: 35.8536585366%;
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
}
@media screen and (min-width: 1280px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(1)::before {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
#effect .effectList .effectListItem.decrease .title:nth-of-type(2)::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(./images/effectListItem_children.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 589px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(2)::before {
    width: 112px;
    height: 92px;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(2)::before {
    width: 120px;
    height: 99px;
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px);
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(2)::before {
    width: 36%;
    max-width: 144px;
    padding-top: 29.8285714286%;
    -webkit-transform: translate(0, 50%);
            transform: translate(0, 50%);
  }
}
@media screen and (min-width: 1280px) {
  #effect .effectList .effectListItem.decrease .title:nth-of-type(2)::before {
    -webkit-transform: translate(0, 20%);
            transform: translate(0, 20%);
  }
}
#effect .effectList .effectListItem.disaster .title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(./images/effectListItem_disaster.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 589px) {
  #effect .effectList .effectListItem.disaster .title::before {
    width: 120px;
    height: 61px;
    -webkit-transform: translate(0, -80%);
            transform: translate(0, -80%);
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #effect .effectList .effectListItem.disaster .title::before {
    width: 177px;
    height: 91px;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem.disaster .title::before {
    width: 46%;
    max-width: 200px;
    padding-top: 23.6497175141%;
    -webkit-transform: translate(0, -120%);
            transform: translate(0, -120%);
  }
}
@media screen and (min-width: 1280px) {
  #effect .effectList .effectListItem.disaster .title::before {
    -webkit-transform: translate(0, -64%);
            transform: translate(0, -64%);
  }
}
#effect .effectList .effectListItem.society .title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(./images/effectListItem_society.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 899px) {
  #effect .effectList .effectListItem.society .title::before {
    width: 90px;
    height: 85px;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #effect .effectList .effectListItem.society .title::before {
    width: 120px;
    height: 114px;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media screen and (min-width: 900px) {
  #effect .effectList .effectListItem.society .title::before {
    width: 33%;
    max-width: 160px;
    padding-top: 31.4769230769%;
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
}
@media screen and (min-width: 1280px) {
  #effect .effectList .effectListItem.society .title::before {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media screen and (max-width: 899px) {
  #effect .circulationImage {
    margin-top: 32px;
  }
}
@media screen and (min-width: 900px) {
  #effect .circulationImage {
    margin-top: 64px;
  }
}

@media screen and (max-width: 899px) {
  .bannerVoice {
    margin-top: 32px;
  }
}
@media screen and (min-width: 900px) {
  .bannerVoice {
    margin-top: 144px;
  }
}
.bannerVoice .banner {
  position: relative;
}
.bannerVoice .bannerVoiceTextBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: 50%;
  left: 6.3%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.bannerVoice .bannerVoiceTextBox .bannerVoiceText {
  color: #FFFFFF;
  font-family: var(--fontJP);
  font-weight: 700;
}
@media screen and (max-width: 899px) {
  .bannerVoice .bannerVoiceTextBox .bannerVoiceText {
    font-size: 1.25em;
  }
}
@media screen and (min-width: 900px) {
  .bannerVoice .bannerVoiceTextBox .bannerVoiceText {
    font-size: 2.2em;
  }
}
.bannerVoice .bannerVoiceTextBox .bannerVoiceArrow {
  border: 1px solid #FFFFFF;
}
.bannerVoice .bannerVoiceTextBox .bannerVoiceArrow.arrow::before {
  background-color: #FFFFFF;
}
.bannerVoice .bannerVoiceTextBox .bannerVoiceArrow.arrow::after {
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
}/*# sourceMappingURL=introduction.css.map */