@charset "UTF-8";


/* ｍV ---------------------- */
.mt-3 {
  margin-top: 3rem !important;
}
#function_detail {
  overflow: hidden;
}
#function_detail .breadcrumb {
  width: 1080px;
  margin: 1.6rem auto;
}
#function_detail .heading1.heading1_function {
  padding: 40px 10px 55px;
}
.heading1-inner {
  margin: 10px auto 0 auto;
  max-width: 1080px;
  font-size: 18px;
  line-height: 1.7;
  padding: 0 20px;
}
.heading1_wrap {
  width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.heading1_subtitle {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  align-items: center;
}
.heading1_subtitle > p {
  color: #003d98;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.4;
}
.heading1_cta {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
}
.heading1_cta > li > a {
  background-color: #003d98;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 2rem;
  border-radius: 4px;
  width: 21rem;
  height: 7rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.heading1_cta > li > a::after {
  content: none !important;
}
.heading1_cta > li > a:hover {
  background-color: #0a56c6;
}
a.heading1_cta__sample {
  color: #003d98 !important;
  background-color: #fff !important;
  border: 2px solid #003d98 !important;
}
a.heading1_cta__sample:hover {
  background-color: #003d98 !important;
  color: #fff !important;
}
#function_detail .heading1_function h1 {
  margin: 0 0 2rem 0;
  padding: 0;
  font-size: 3.2rem;
}

/* body ------------------ */
#function_detail .section {
  margin: 0 !important;
  padding: 6rem 0;
  width: 100%;
}
.section_inner {
  margin-right: auto;
  margin-left: auto;
  padding-right: 14px;
  padding-left: 14px;
  max-width: 1080px;
}
.section_intro .heading2 {
  text-align: center;
  border: none;
  color: #333333;
  font-size: 2.4rem;
}
.section_intro_onayami {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.section_intro_onayami > li {
  width: calc((100% - 4rem) / 3);
  background-color: #f7faff;
  border-bottom: 4px solid #003399;
  border-radius: 3px;
  padding: 20px 15px;
}
.section_intro_onayami > li > img {
  width: 100%;
}
.section_intro_onayami > li > p {
  color: #696969;
  font-weight: 800;
  padding: 0 5px;
  line-height: 1.6;
}
.section_intro_onayami > li > hr {
  border-top: 2px dashed #B3B3B3;
  width: 100%;
}
.section.bg-gray {
  background-color: #f3f3f3;
}
.section_intro:has(.section_intro_onayami) {
  position: relative;
}
.section_intro:has(.section_intro_onayami)::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 250px solid transparent;
  border-left: 250px solid transparent;
  border-top: 90px solid #003399;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}
span.font-blue-under {
  position: relative;
  color: #003399;
  display: inline-block;
  z-index: 1;
}
span.font-blue-under::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  background-color: #c9def5;
  z-index: -1;
}
.section_intro_kaiketsu {
  width: 100%;
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
}
.section_intro_kaiketsu_txt {
  width: 50%;
}
.section_intro_kaiketsu > li {
  display: flex;
  gap: 8rem;
  justify-content: space-between;
  counter-increment: step-counter;
}
.section_intro_kaiketsu > li + li {
  margin-top: 4rem;
}
.section_intro_kaiketsu > li.item-reverse {
  flex-direction: row-reverse;
}
.section_intro_kaiketsu > li > img {
  height: fit-content;
  width: 50%;
  border-radius: 10px;
}
.section_intro_kaiketsu_txt h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  padding: 3rem 0;
  color: #333;
  font-size: 2.2rem;
  line-height: 1.4;
}
.section_intro_kaiketsu_txt p {
  line-height: 2.2;
}
.section_intro_kaiketsu_txt h3::before {
  content: counter(step-counter, decimal-leading-zero);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  background-color: #003399;
  color: #ffffff;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-weight: bold;
  flex-shrink: 0;
}
.section_summary .heading2 {
  text-align: center;
  border: none;
  font-size: 3.2rem;
  margin-bottom: 1.8rem;
}
.section_summary .section_inner > p {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 3rem;
}
#function_detail .row {
  margin: 3rem 0 0 !important;
}
.section_summary .heading3 {
  font-size: 2.4rem;
}
.section_summary .heading3:nth-child(n+2) {
  margin-top: 6rem;
}
.section_summary__flex {
  display: flex;
  gap: 3rem;
}
.section_summary__item {
  flex: 1;
}
.section_summary__item-list {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 3rem 3.5rem 4rem;
  margin-bottom: 1.5rem;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.section_summary__item-list:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.section_summary__item-list::before {
  content: "▼詳細を見る";
  color: #003399;
  font-weight: 800;
  font-size: 1.4rem;
  position: absolute;
  bottom: 1rem;
  right: 3rem;
  display: block;
}
.section_summary__item-list > a {
  display: block;
  color: #003399;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 16px;
  line-height: 1.4;
}
.section_summary__item-list > a > span {
  color: #fff;
  background-color: #003399;
  border-radius: 3px;
  padding: 3px 6px;
  display: inline-block;
}
.section_summary__item-list > a > h3 {
  font-size: 2.3rem;
  padding: 10px 0 5px;
}
.section_summary__item-list p {
  color: #555555;
  line-height: 1.6;
  margin-bottom: .5rem;
  font-weight: 500;
  font-size: 1.6rem;
}
.common-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.common-list_row {
  display: flex;
  gap: 1rem;
}
.common-list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: .5rem;
  color: #555555;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}
.common-list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #003399;
  border-radius: 50%;
}
.section_summary__item-list *:last-child {
  margin-bottom: 0;
}
.section_detail .heading2 {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #f3f3f3;
  padding: 1rem 2rem;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  color: #003399;
  font-size: 3rem;
  font-weight: bold;
  margin: 0 0 4rem 0;
  line-height: 1.4;
}
.section_detail.bg-gray .heading2 {
  background-color: #ffffff;
}
.section_detail .heading2 span {
  display: inline-block;
  background-color: #003399;
  color: #ffffff;
  padding: 6px 10px 3px;
  border-radius: 4px;
  line-height: 1;
  font-size: 50%;
}
.section_detail_cont {
  padding: 0px 2.6rem;
}
.section_detail .heading3 {
  font-size: 2.4rem;
}
.section_detail .heading3:nth-child(n+2) {
  margin-top: 6rem;
}
.section_flow .heading3.inverted_triangle:nth-child(n+2),
.section_flow .heading4.inverted_triangle:nth-child(n+2) {
  margin-top: 10rem;
  position: relative;
}
.section_flow .heading3.inverted_triangle:nth-child(n+2)::before,
.section_flow .heading4.inverted_triangle:nth-child(n+2)::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 200px solid transparent;
  border-left: 200px solid transparent;
  border-top: 50px solid skyblue;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  bottom: 195%;
  transform: translate(-50%, 50%);
}
.section_detail p {
  text-align: left;
  line-height: 1.8;
}
.section_detail p + p {
  margin-top: 1rem;
}
.section_detail .heading4 {
  font-size: 2rem;
  margin-bottom: 0;
  margin-top: 1em;
}
.section .figure-flex {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
.section .figure-flex figure {
  width: auto;
}
.section .figure-flex figure img {
  width: 100%;
}
.section .figure-flex p {
  flex: 1;
}
.underline-link {
  font-weight: 600;
}
.underline-link::after {
  content: none !important;
}
.section_faq {
  margin-top: 40px;
  margin-bottom: 40px;
padding-bottom:0 !important;
}
.section_faq .heading2 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 32px;
  border: none;
}
@keyframes fadeinFaq {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.common_box_list {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
section.bg-gray .common_box_list > li {
  background: #fff;
}
.common_box_list > li {
  width: calc((100% - 4rem) / 3);
  background-color: #f7faff;
  border-radius: 3px;
  padding: 20px 15px;
  line-height: 1.4;
}
.common_box_list h3 {
  text-align: center;
  padding: 10px 0 5px;
  color: #003399;
}
.common_box_list hr {
  border-top: 2px dashed #B3B3B3;
  width: 100%;
}
.common_box_list img {
  width: 100%;
  border-radius: 5px;
}
.common_box_list p {
  line-height: 1.4;
}

/* functionList ------------------ */
.functionList {
  margin-left: 15px;
  background: #eef6ff;
  border-collapse: collapse;
  width: 100%;
}
.functionList.detail.column-3 tr td:nth-child(1) {
  width: 35%;
}
section.bg-gray .functionList.detail {
  background: #fff;
}
section.bg-gray .functionList.detail td {
  border-bottom: 1px solid #d8dade;
}
section.bg-gray .functionList.detail td + td {
  border-left: 1px solid #d8dade;
}
.functionList.detail tr td:nth-child(1) {
  font-weight: bold;
}
.functionList.detail th,
.functionList.detail td {
  font-size: 1.6rem;
  padding: 1rem 2rem;
}
.functionList.detail th {
  padding: .5rem;
}
.functionList th {
  text-align: center;
  color: #FFF;
  background: #003d98;
  font-size: 18px;
  border-bottom: 1px solid #FFF;
  padding: 5px 30px;
}
.functionList tr > td:first-child {
  width: 34%;
}
.functionList td {
  vertical-align: middle;
  padding: 16px 32px 16px 25px;
  line-height: 1.6;
  border-bottom: 1px solid #FFF;
  font-size: 1.8rem;
  font-weight: 500;
}
.functionList th + th,
.functionList td + td {
  border-left: 1px solid #FFF;
}
.functionList td:nth-child(3) {
  padding: 16px 35px;
}
.functionList td .functionList-head {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
  line-height: 1.4;
}
.functionList td .functionList-head img {
  max-width: 100%;
}
.functionList td .functionList-head span {
  font-size: 20px;
  font-weight: bold;
}
.functionList td a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-weight: bolder;
  color: #003d98;
  background: #FFF;
  border: 1px solid #003d98;
  border-radius: 4px;
  margin: 0 auto;
  padding: 8px 10px 4px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: .3s;
  font-size: 14px;
  line-height: 1;
}
.functionList td a:before {
  content: "";
  border-right: 6px solid transparent;
  border-bottom: 6px solid #003d98;
  border-left: 6px solid transparent;
  transform: rotate(90deg);
  transition: .3s;
  margin-top: -4px;
}
.functionList .js-area-link {
  cursor: pointer;
  transition: .3s;
}




/* applyInduction / floating ----- */
.applyInduction {
  background-color: #003399;
  padding: 60px 0;
}
.applyInduction h2 {
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 3.2rem; /* 51.2px と重複していたため rem に統一 */
}
.applyInduction .lead {
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.applyInduction a {
  text-decoration: none;
}
p.white-underline {
  text-decoration: underline white;
}
main#function_detail + .applyInduction {
  margin-top: 50px;
}
main + .applyInduction {
  margin-top: 150px;
}
.applyInduction + .container + footer {
  margin-top: 0;
}

.floating-button3 {
  top: 320px;
}
#function_detail #scrollBanner {
  z-index: 1;
}

/* メディアクエリ ---------------- */
@media screen and (max-width: 1200px) {
  .section_inner {
    padding-right: 6rem;
    padding-left: 6rem;
  }
}

@media screen and (max-width: 769px) {
#function .functionList td{
    padding: 16px 40px 16px 40px;
}
#function .functionList:not(.column-3) td.padding-sp{
        padding: 0 40px;
}
  .section_detail_cont {
    padding: 0;
  }
  .section_flow .heading3.inverted_triangle:nth-child(n+2)::before,
  .section_flow .heading4.inverted_triangle:nth-child(n+2)::before {
    border-right: 10rem solid transparent;
    border-left: 10rem solid transparent;
    border-top: 4rem solid skyblue;
    bottom: 9rem;
  }
  .common-list_row {
    flex-direction: column;
    gap: 0;
  }
  .common-list_row li {
    margin-bottom: 0rem;
  }
  .section_detail .heading4 {
    font-size: 1.6rem;
  }
  .common_box_list > li {
    width: 100%;
  }
  .section_intro_kaiketsu > li > img {
    width: 100%;
  }
  .section_intro_kaiketsu_txt {
    width: 100%;
  }

  .section_summary .heading3 {
    font-size: 2rem;
  }
  .section_summary .heading2 {
    font-size: 2.6rem;
  }
  #function_detail .heading1 {
    margin-bottom: 0 !important;
  }
  #function_detail h1 {
    font-size: 2.6rem !important;
  }
  .section_inner {
    width: auto;
  }
  .heading1_cta {
    flex-direction: column;
  }
  .heading1_wrap {
    width: auto;
  }
  .heading1_cta > li > a {
    width: 100%;
    height: auto;
    padding: .5rem 0;
    font-size: 1.6rem;
  }
  #function_detail .heading1.heading1_function {
    font-size: 2.4rem;
    margin-bottom: 0;
  }
  .heading1_subtitle > p {
    font-size: 1.4rem;
  }
  .section_intro_onayami {
    flex-direction: column;
  }
  .section_intro_onayami > li {
    width: 100%;
  }
  .section_intro:has(.section_intro_onayami)::before {
    border-right: 150px solid transparent;
    border-left: 150px solid transparent;
    border-top: 50px solid #003399;
  }
  .section_intro_kaiketsu > li {
    flex-direction: column-reverse;
    gap: 0;
  }
  .section_intro_kaiketsu > li.item-reverse {
    flex-direction: column-reverse;
  }
  .section_summary__flex {
    flex-direction: column;
  }
  .section_summary__item-list {
    padding: 2rem 2rem 5rem;
  }
  .section_detail .heading2 {
    font-size: 2rem;
    margin: 0 0 2rem 0;
    padding: 1rem;
  }
  .section_detail .heading3 {
    font-size: 1.8rem;
  }
  .section .figure-flex {
    flex-direction: column;
    gap: 0;
  }
}

@media all and (max-width: 768px) {
  .functionList.column-3 {
    min-width: 1000px;
  }
  .table-scrollx {
    overflow-x: scroll;
  }
  section.bg-gray .functionList.detail td + td {
    border-left: none;
    border-bottom: none;
    padding-top: 5px !important;
  }
  section.bg-gray .functionList.detail tr + tr {
    border-top: 15px solid #f3f3f3;
  }
  section.bg-gray .functionList.detail tr:nth-child(2) {
    border-top: 0;
  }
  .functionList.detail tr td:nth-child(1) {
    padding-bottom: 5px;
  }
  .functionList.detail th {
    padding: .5rem;
  }
  .functionList {
    margin-left: 0;
  }
  .functionList:not(.column-3) tr {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .functionList:not(.column-3) tr + tr {
    border-top: 15px solid #FFF;
  }
  .functionList:not(.column-3) tr:nth-child(2) {
    border-top: 0;
  }
  .functionList:not(.column-3) td {
    border-bottom: none;
    width: 100% !important;
    font-size: 1.4rem;
  }
  .functionList:not(.column-3) td.padding-sp {
    padding: 0 30px;
  }
  .functionList:not(.column-3) th + th,
  .functionList:not(.column-3) td + td {
    border-left: none;
  }
  .functionList:not(.column-3) td + td {
    padding-top: 0 !important;
  }
  .functionList td .functionList-head span {
    font-size: 20px;
  }
  .functionList td a {
    color: #003d98;
    background: #FFF;
    padding: 16px 10px 12px 10px;
  }
  .functionList td a:before {
    border-right: 6px solid transparent;
    border-bottom: 6px solid #003d98;
    border-left: 6px solid transparent;
  }
}

@media all and (min-width: 737px) {
  .applyInduction .btn:hover {
    background-color: #001f4e;
  }
}

@media all and (min-width: 769px) {
  .functionList .js-area-link:hover {
    background: #eee;
  }
  .functionList .js-area-link:hover a {
    color: #FFF;
    background: #003d98;
  }
  .functionList .js-area-link:hover a:before {
    border-right: 6px solid transparent;
    border-bottom: 6px solid #FFF;
    border-left: 6px solid transparent;
  }
}