@charset "UTF-8";
/* 導入事例
---------------------------------------------------------- */
.case {
  padding-block: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
  overflow: hidden;
}

.case__container {
  width: min(92%, 1516px);
  margin-inline: auto;
}
@media screen and (min-width: 576px) {
  .case__container {
    width: 100%;
    margin-inline: 0;
    padding-left: 10.4166666667%;
  }
}

.case__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: min(92%, 1516px);
  margin-inline: auto;
}
@media screen and (min-width: 576px) {
  .case__head {
    width: 100%;
    margin-inline: 0;
    padding-inline: 10.4166666667%;
  }
}

.case__head_title .section-title {
  text-align: left;
}

.case__description {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .case__description {
    margin-top: 2.5rem;
  }
}

.case__bottom_more {
  width: fit-content;
  margin: 1.875rem 0 0 auto;
}
@media screen and (min-width: 576px) {
  .case__bottom_more {
    margin: 1.875rem 10.4166666667% 0 auto;
  }
}

.case__slider {
  position: relative;
  margin-top: 2.5rem;
}
@media screen and (min-width: 576px) {
  .case__slider {
    margin: 3.75rem calc(50% - 50vw);
  }
}

@media screen and (min-width: 576px) {
  .case__slider_inner {
    margin-right: calc(50% - 50vw);
  }
}

@media screen and (min-width: 576px) {
  .case__slider .splide__track {
    padding-left: 0 !important;
  }
}

/* card */
.case__slide {
  padding-inline: 8%;
  transition: opacity 0.4s ease;
}
@media screen and (min-width: 576px) {
  .case__slide {
    width: 280px;
    padding-inline: 0;
  }
}
@media screen and (min-width: 768px) {
  .case__slide {
    width: 300px;
  }
}
@media screen and (min-width: 992px) {
  .case__slide {
    width: 360px;
  }
}

/* arrow & progress */
.case__controller {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  margin-top: 2.1875rem;
}
@media screen and (min-width: 576px) {
  .case__controller {
    gap: 1.875rem;
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .case__controller {
    gap: 2.25rem;
    margin-top: 3.125rem;
  }
}

.case__slider .splide__arrows {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.case__slider .splide__arrow {
  position: absolute;
  top: 0;
  margin-top: calc(42% - 20px);
}
@media screen and (min-width: 400px) {
  .case__slider .splide__arrow {
    margin-top: calc(42% - 30px);
  }
}
@media screen and (min-width: 576px) {
  .case__slider .splide__arrow {
    position: static;
    margin-top: 0;
  }
}

.splide__arrow {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 14px 32px rgba(0, 25, 115, 0.15);
  transition: background-color 0.3s ease;
}
@media screen and (min-width: 400px) {
  .splide__arrow {
    width: 60px;
    height: 60px;
  }
}
@media screen and (min-width: 992px) {
  .splide__arrow {
    width: 74px;
    height: 74px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .splide__arrow:hover {
    background-color: #001973;
  }
  .splide__arrow:hover::after {
    border-color: #fff;
  }
}

.splide__arrow--prev {
  left: 0;
}

.splide__arrow--next {
  right: 0;
}

.splide__arrow::after {
  width: 14px;
  height: 14px;
  content: "";
  border: solid #001973;
  border-width: 3px 3px 0 0;
  transition: border-color 0.3s ease;
}

.splide__arrow--prev::after {
  margin-left: 0.4rem;
  transform: rotate(-135deg);
}

.splide__arrow--next::after {
  margin-right: 0.4rem;
  transform: rotate(45deg);
}

.my-carousel-progress {
  width: 100%;
  background: #BCBCBC;
  height: 1px;
}

.my-carousel-progress-bar {
  background: #0068B7;
  height: 4px;
  transition: width 400ms ease;
  width: 0;
  position: relative;
  top: -2px;
}

/* 導入実績
---------------------------------------------------------- */
.record {
  margin-top: 4.0625rem;
}

.record__head {
  text-align: center;
}

.record__list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2.5rem;
  max-width: 1295px;
  margin-right: auto;
  margin-left: auto;
  /*
    @include min('sm') {
      grid-template-columns: repeat(3, auto);
    }

    @include min('md') {
      grid-template-columns: repeat(4, auto);
    }
  */
}
@media screen and (min-width: 992px) {
  .record__list {
    row-gap: 1rem;
  }
}

.record__item {
  width: 50%;
  display: grid;
  place-content: center;
  min-height: 5rem;
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}
@media screen and (min-width: 576px) {
  .record__item {
    width: 33.3333%;
  }
}
@media screen and (min-width: 768px) {
  .record__item {
    width: 25%;
  }
}
@media screen and (min-width: 992px) {
  .record__item {
    padding-right: 2.1437994723%;
    padding-left: 2.1437994723%;
  }
}

.record__item img {
  max-height: 80px;
  width: 100%;
  object-fit: contain;
}

.record__caution {
  font-size: 0.875rem;
  margin-top: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
  max-width: 1295px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media screen and (max-width: 360px) {
  .record__caution {
    font-size: 0.6875rem;
  }
}
@media screen and (min-width: 768px) {
  .record__caution {
    font-size: 1rem;
    text-align: right;
  }
}

.fv {
  height: 100svh;
  padding-block: 70px clamp(3.875rem, 3.5rem + 1.875vw, 5.75rem);
  background-color: #E3F4F3;
}
@media screen and (min-width: 768px) {
  .fv {
    padding-top: 80px;
    height: auto;
  }
}
@media screen and (min-width: 1200px), print {
  .fv {
    padding-top: 100px;
  }
}
@media screen and (min-width: 1800px) {
  .fv {
    height: 980px;
  }
}

.fv__inner,
.fv__slider,
.splide__track {
  height: 100%;
}

.fv__inner {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-left: 10.4166666667%;
}

.fv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1720/871;
  border-radius: clamp(0.625rem, 0.15rem + 2.375vw, 3rem) 0 0 clamp(0.625rem, 0.15rem + 2.375vw, 3rem);
  object-position: 60%;
}
@media screen and (min-width: 768px) {
  .fv__slide img {
    object-position: center;
  }
}

.fv__message {
  position: absolute;
  left: 0;
  bottom: 1.875rem;
}
@media screen and (min-width: 768px) {
  .fv__message {
    bottom: clamp(1.875rem, -4.1666666667rem + 12.5868055556vw, 10.9375rem);
  }
}

.fv__message_text .text {
  display: inline-block;
  font-size: 4.875rem;
  font-size: clamp(1.875rem, 1.0714285714rem + 4.0178571429vw, 3rem);
  font-weight: 700;
  color: #333;
  letter-spacing: 0.1em;
  padding: 0.1em clamp(0.625rem, 0.2rem + 2.125vw, 2.75rem) 0.1em clamp(2.5rem, -1.0714285714rem + 17.8571428571vw, 7.5rem);
  backdrop-filter: blur(40px) brightness(1.2);
  --webkit-backdrop-filter: blur(40px) brightness(1.2);
  background-color: rgba(255, 255, 255, 0.2);
}
@media screen and (min-width: 768px) {
  .fv__message_text .text {
    font-size: clamp(2.375rem, 0.7083333333rem + 3.4722222222vw, 4.875rem);
    padding: 0.1em clamp(0.625rem, 0.2rem + 2.125vw, 2.75rem) 0.1em clamp(6.25rem, 3.3333333333rem + 6.0763888889vw, 10.625rem);
  }
}

.fv__message_text .text:not(:first-child) {
  margin-top: 0.2564102564em;
}

/* お知らせ（FV下）
---------------------------------------------------------- */
.news {
  max-width: 516px;
  margin-inline: auto;
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .news {
    max-width: 696px;
  }
}
@media screen and (min-width: 992px) {
  .news {
    max-width: 936px;
  }
}
@media screen and (min-width: 1200px), print {
  .news {
    max-width: 1077px;
  }
}

.news__item {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 2.7855153203%;
  font-size: 1rem;
  width: 100%;
  height: clamp(3.75rem, 3.5rem + 1.25vw, 5rem);
  padding: 0 clamp(1.375rem, 1.25rem + 0.625vw, 2rem) 0 clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
  border-radius: 3.125rem;
  background-color: #fff;
  box-shadow: 0px 3px 30px rgba(0, 25, 115, 0.15);
}
@media (hover: hover) and (pointer: fine) {
  .news__item:hover {
    opacity: 1;
  }
  .news__item:hover .news__title {
    color: #001973;
  }
}

.news__item::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border: solid #001973;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}

.news__date {
  font-size: 0.9375em;
  color: #001973;
  letter-spacing: 0.02em;
}

.news__title {
  color: #333;
  transition: color 0.3s ease;
}

/* NTT EDX とは
---------------------------------------------------------- */
.about {
  margin-top: 5rem;
}

.about__inner {
  display: grid;
  gap: 2.5rem;
}
@media screen and (min-width: 768px) {
  .about__inner {
    grid-template-columns: auto 1fr;
    gap: 5.2770448549%;
    margin-left: calc(50% - 50vw);
  }
}
@media screen and (min-width: 1921px) {
  .about__inner {
    margin-left: 0;
    grid-template-columns: 1fr 1fr;
  }
}

.about__thumb {
  margin-left: calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .about__thumb {
    width: 43.6458333333vw;
    margin-left: 0;
  }
}
@media screen and (min-width: 1921px) {
  .about__thumb {
    width: auto;
  }
}

.about__thumb img {
  border-radius: 0 0.9375rem 0.9375rem 0;
  box-shadow: 0px 14px 60px rgba(0, 25, 115, 0.15);
}
@media screen and (min-width: 768px) {
  .about__thumb img {
    border-radius: 0 1.875rem 1.875rem 0;
  }
}
@media screen and (min-width: 1921px) {
  .about__thumb img {
    border-radius: 1.875rem;
  }
}

.about__content .section-title {
  text-align: left;
}

.about__content_title {
  margin-top: 1rem;
}

.about__content_text {
  margin-top: 1rem;
  line-height: 2.4375;
  text-align: justify;
}

.about__content_more {
  margin-top: clamp(1.875rem, 1.6875rem + 0.9375vw, 2.8125rem);
}

.about__content_more .arrow-link {
  width: fit-content;
  margin-left: auto;
}

/* 事業・サービス
---------------------------------------------------------- */
.service {
  padding-block: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
  margin-top: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
}

.service__head_description {
  font-size: clamp(1.625rem, 1.55rem + 0.375vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 2.25rem;
  text-align: center;
}

.service__list {
  display: grid;
  gap: 1.625rem;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  max-width: 1300px;
  margin-top: 3.4375rem;
  margin-inline: auto;
}
@media screen and (min-width: 1200px), print {
  .service__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service__item {
  border-radius: 1.125rem;
  background-color: #fff;
  box-shadow: 0px 3px 30px rgba(0, 25, 115, 0.15);
}

.service__item_link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.5rem 1.125rem;
  color: #333;
}
@media (hover: hover) and (pointer: fine) {
  .service__item_link:hover {
    opacity: 1;
  }
  .service__item_link:hover .service__item_title {
    color: #001973;
  }
  .service__item_link:hover .service__item_title_arrow {
    border-color: #001973;
    background-color: #fff;
  }
  .service__item_link:hover .service__item_title_arrow::after {
    border-color: #001973;
  }
}

.service__item_thumb {
  text-align: center;
}

.service__item_title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: fit-content;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 1.25rem;
  margin-inline: auto;
  flex-grow: 1;
  transition: color 0.3s ease;
}
@media screen and (min-width: 992px) {
  .service__item_title {
    width: 100%;
    font-size: clamp(0.875rem, 0.5384615385rem + 0.3846153846vw, 1rem);
  }
}

.service__item_title_arrow {
  display: grid;
  place-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid transparent;
  background-color: #001973;
  border-radius: 50%;
  transition: border-color 0.3s, background-color 0.3s ease;
}

.service__item_title_arrow::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border: solid #fff;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
  margin-right: 0.1875rem;
  transition: border-color 0.3s ease;
}

/* お役立ち情報
---------------------------------------------------------- */
.column {
  padding-block: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
  overflow: hidden;
}

.column__slider {
  position: relative;
  margin-top: 5rem;
  width: min(92%, 1516px);
  margin-inline: auto;
}

.column__slider .splide__track {
  overflow: visible;
}

.column__slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.column__slider .splide__arrow--prev {
  left: 4%;
}

.column__slider .splide__arrow--next {
  right: 4%;
}

.column__slider .splide__arrow > svg {
  display: none;
}

.column__slide {
  color: #333;
  background-color: #fff;
  box-shadow: 0px 25px 115px rgba(0, 25, 115, 0.15);
  border-radius: 1.125rem;
}
@media screen and (min-width: 768px) {
  .column__slide {
    width: 360px;
  }
}
@media screen and (min-width: 992px) {
  .column__slide {
    width: 416px;
  }
}

.column__slide_link {
  display: block;
  height: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .column__slide_link:hover {
    opacity: 1;
  }
  .column__slide_link:hover .column__slide_thumb img {
    transform: scale(1.05);
  }
}

.column__slide_thumb {
  position: relative;
  overflow: hidden;
  border-radius: 1.125rem 1.125rem 0 0;
}

.column__slide_thumb img {
  aspect-ratio: 416/287;
  object-fit: cover;
  width: 100%;
  border-radius: 1.125rem 1.125rem 0 0;
  transition: transform 0.3s ease;
}

.column__slide_head_categories {
  position: absolute;
  top: 1.25rem;
  left: 0.5rem;
}

.column__slide_head_category {
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: 0.8em 1.33em;
  color: #333;
  background-color: #F3F071;
  border-radius: 1.125rem;
}

.column__slide_body {
  padding: 2rem 1.625rem;
}

.column__slide_date {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: #001973;
}

.column__slide_title {
  font-size: 1rem;
  color: #333;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 0.25em;
}

.column__more {
  margin-top: 3.75rem;
}

.column__more .arrow-link {
  width: fit-content;
  margin-inline: auto;
}

/* よくある質問
---------------------------------------------------------- */
.faq {
  width: min(92%, 1516px);
  margin-inline: auto;
  padding-block: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
}

.faq__list {
  max-width: 1076ox;
  margin-inline: auto;
  margin-top: 5rem;
}

.faq__more {
  margin-top: 3.75rem;
}

.faq__more .arrow-link {
  width: fit-content;
  margin-inline: auto;
}

/* 導入実績
---------------------------------------------------------- */
.data {
  padding-block: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
}

.data__contents {
  position: relative;
  padding: clamp(2.5rem, 2.175rem + 1.625vw, 4.125rem) clamp(1.25rem, 0.4375rem + 4.0625vw, 5.3125rem);
  margin-top: 4.375rem;
  background-color: #fff;
  box-shadow: 0px 3px 30px rgba(0, 25, 115, 0.15);
  border-radius: 1.125rem;
  max-width: 1295px;
  margin-inline: auto;
}

.data__content {
  display: grid;
  align-items: center;
  gap: 1.875rem;
}
@media screen and (min-width: 992px) {
  .data__content {
    grid-template-columns: auto 1fr;
    gap: clamp(1.5625rem, -1.5625rem + 6.5104166667vw, 6.25rem);
  }
}
.data__content + .data__content {
  border-top: 1px solid #BCBCBC;
  margin-top: 3.75rem;
  padding-top: 2.8125rem;
}

.data__content_head {
  text-align: center;
}
@media screen and (min-width: 992px) {
  .data__content_head {
    text-align: left;
  }
}

.data__content_head img {
  width: clamp(14.375rem, 13.4821428571rem + 4.4642857143vw, 15.625rem);
}
@media screen and (min-width: 992px) {
  .data__content_head img {
    width: clamp(12.5rem, 10.4166666667rem + 4.3402777778vw, 15.625rem);
  }
}

.data__content_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  gap: 2.5rem;
}
@media screen and (min-width: 992px) {
  .data__content_list {
    width: 100%;
    margin-inline: 0;
    gap: 0;
    justify-content: space-between;
  }
}

.data__content_item {
  font-weight: 700;
  text-align: center;
}

.data__content_item:nth-child(1) {
  width: 16.125rem;
}

.data__content_item:nth-child(2) {
  width: 13.75rem;
}

.data__content_item:nth-child(3) {
  width: 16rem;
}

.data__content_thumb {
  display: grid;
  place-content: center;
  width: 4.125rem;
  height: 4.125rem;
  margin-inline: auto;
}

.data__content_item_title {
  font-size: clamp(1rem, 0.9166666667rem + 0.1736111111vw, 1.125rem);
  margin-top: 0.9375rem;
  letter-spacing: 0.02em;
}

.data__content_item_result {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4761904762em;
  font-size: clamp(1.125rem, 1rem + 0.2604166667vw, 1.3125rem);
  margin-top: 0.25rem;
}

.data__content_item_result .num {
  font-size: 2.2857142857em;
  line-height: 1;
  letter-spacing: 0;
}

.data__date {
  /*
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(calc(-100% - 10px));*/
  font-size: 1rem;
}

/* 企業情報
---------------------------------------------------------- */
.company {
  padding-block: clamp(3.75rem, 3rem + 3.75vw, 7.5rem);
}

.company__inner {
  display: grid;
  gap: 2.5rem;
}
@media screen and (min-width: 768px) {
  .company__inner {
    grid-template-columns: auto 1fr;
    gap: 5.2770448549%;
    margin-left: calc(50% - 50vw);
  }
}
@media screen and (min-width: 1921px) {
  .company__inner {
    margin-left: 0;
    grid-template-columns: 1fr 1fr;
  }
}

.company__thumb {
  margin-left: calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .company__thumb {
    width: 50vw;
    margin-left: 0;
  }
}
@media screen and (min-width: 1921px) {
  .company__thumb {
    width: auto;
  }
}

.company__thumb img {
  border-radius: 0 0.9375rem 0.9375rem 0;
  box-shadow: 0px 14px 60px rgba(0, 25, 115, 0.15);
}
@media screen and (min-width: 768px) {
  .company__thumb img {
    border-radius: 0 1.875rem 1.875rem 0;
  }
}
@media screen and (min-width: 1921px) {
  .company__thumb img {
    border-radius: 1.875rem;
  }
}

.company__content .section-title {
  text-align: left;
}

.company__content_title {
  font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
  font-weight: 700;
  line-height: 1.4666666667;
  margin-top: 1.875rem;
}

.company__content_text {
  margin-top: 1.875rem;
  line-height: 2.4375;
  text-align: justify;
}

.company__content_more {
  margin-top: clamp(1.875rem, 1.6875rem + 0.9375vw, 2.8125rem);
}

.company__content_more .arrow-link {
  width: fit-content;
  margin-left: auto;
}

/* お知らせ
---------------------------------------------------------- */
.information {
  background-color: #fff;
  box-shadow: 0px 3px 30px rgba(0, 25, 115, 0.15);
  border-radius: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .information {
    border-radius: 1.875rem;
  }
}

.information__inner {
  display: grid;
  gap: clamp(1.875rem, 1.5773809524rem + 1.4880952381vw, 2.5rem);
  padding: clamp(2.5rem, 1.755952381rem + 3.7202380952vw, 4.0625rem) clamp(1.25rem, -0.0892857143rem + 6.6964285714vw, 4.0625rem);
}
@media screen and (min-width: 992px) {
  .information__inner {
    gap: 0;
    grid-template-columns: auto 1fr;
    padding: clamp(4.0625rem, 1.3900862069rem + 4.3103448276vw, 6.5625rem) clamp(5.875rem, 0.7974137931rem + 8.1896551724vw, 10.625rem) clamp(4.0625rem, 1.3900862069rem + 4.3103448276vw, 6.5625rem) clamp(3.625rem, -0.3836206897rem + 6.4655172414vw, 7.375rem);
  }
}

.information__head {
  display: flex;
  align-items: flex-end;
}
@media screen and (min-width: 992px) {
  .information__head {
    display: block;
    margin-right: clamp(5rem, 2.9956896552rem + 3.2327586207vw, 6.875rem);
    padding-right: clamp(4.0625rem, 2.0581896552rem + 3.2327586207vw, 5.9375rem);
    border-right: 1px solid #E1E1E1;
  }
}

.information__head .section-title {
  text-align: left;
}

.information__head_more {
  margin-inline: auto;
}
@media screen and (min-width: 576px) {
  .information__head_more {
    margin-right: 0;
  }
}
@media screen and (min-width: 992px) {
  .information__head_more {
    margin-top: 2.3125rem;
    margin-left: 0;
  }
}

.information__head_more .arrow-link {
  width: fit-content;
  margin-left: auto;
}

.information__item {
  border-bottom: 1px solid #E1E1E1;
}

.information__item_link {
  display: block;
  font-size: 1rem;
  padding: 1rem 0;
}
@media (hover: hover) and (pointer: fine) {
  .information__item_link:hover {
    opacity: 1;
  }
  .information__item_link:hover .information__item_title {
    color: #001973;
  }
}

.information__item_date {
  font-size: 0.875em;
  color: #001973;
}

.information__item_title {
  color: #333;
  margin-top: 2px;
  transition: color 0.3s ease;
}/*# sourceMappingURL=front-page.css.map */