@charset "UTF-8";
/*---------------------------------
202602 AI-OCR 新機能リリースページ用
release/llm.asp
---------------------------------*/
/*-------------------
リリースページ用 MV [ .mv_release ]
-------------------*/
@font-face {
    font-family: 'NotosansJP';
    src: url(/ai-ocr/css/fonts/NotoSansJP-ExtraBold.ttf);
    font-weight: 900;
}
/*--------------------------------------
全体共通
--------------------------------------*/
.txt_blue { color: #0044CC }
.only_pc { display: block }
.only_sp { display: none }
@media screen and (max-width: 767px) {
  .only_pc { display: none }
  .only_sp { display: block }
}

/*---------------------------------
release
---------------------------------*/
#release.section_wrapper {
  padding-top: 0;
}
@media (min-width: 1024px) {
  #release.section_wrapper {
    padding-top: 64px;
  }
}

/*--------------------------------------
メインビジュアル [ mv_release ]
--------------------------------------*/
.mv_release {
  margin: 50px auto 16px;
  background: #F0F5FA;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.mv_release_wrapper {
  padding: 120px 5% 64px;
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}
.mv_release_label {
  margin: 0 auto;
  padding: 0 3rem;
  width: auto;
  max-width: 200px;
  font-size: 1rem;
  line-height: 2.2rem;
  letter-spacing: 0.15rem;
  background: #fff;
  border: 1px solid #0044CC;
}
.mv_release h2 {
  margin: 30px auto;
  font-size: 3.2rem;
  font-weight: 600;
}
.mv_release h2 span.h2_sub {
  display: block;
  font-size: 2.4rem;
  color: #6A7282;
}
.mv_release h2 span.h2_main {
  display: block;
  font-weight: 900;
  color: #000;
  letter-spacing: -0.08rem;
}
.mv_release h2 span.h2_emphasis {
  display: inline-block;
  color: #0044CC;
  text-decoration: underline #FDC700;
  text-decoration-thickness: 4px;
  text-underline-offset: -0.1rem;
}
p.mv_release_message {
  margin: 0 auto;
  padding: 24px 48px;
  color: #364153;
  background: #fff;
  border: 1px solid #eee;
}

@media screen and (max-width: 767px) {
  .mv_release {
    margin: 0 auto 16px;
  }
  .mv_release_wrapper {
    padding: 90px 5% 60px;
    position: relative;
    width: 100%;
  }
  .mv_release h2 {
    margin: 20px auto 30px;
    font-size: 3rem;
  }
  .mv_release h2 span.h2_sub {
    font-size: 2rem;
  }
  p.mv_release_message {
    margin: 0 auto;
    padding: 18px;
  }
}


/*--- MV内CTAボタン [ cta_btn ] ---*/
.mv_release .cta_btn {
  width: 100%;
  max-width: 440px;
  background-color: var(--color-secondary);
  box-shadow: 8px 8px 0 rgba(128, 155, 211, 0.1);
  margin: 32px auto 0;
  border-radius: 9999px;
  text-align: center;
  transform: translate(0, 0);
  transition: .3s;
  background-image: url(/ai-ocr/img/release/icon-document.svg);
  background-repeat:  no-repeat;
  background-position: 4% 50%;
}
.mv_release .cta_btn a {
  width: 100%;
  height: 100%;
  padding: 10px 0;
}
.mv_release .cta_btn p {
  display: inline-block;
}
.mv_release .cta_btn p:first-child {
  color: var(--color-tertiary);
  font-weight: 600;
  font-size: 1.8rem;
}
.mv_release .cta_btn p:last-child {
  color: var(--color-wh);
  font-weight: 600;
  font-size: 2.4rem;
  padding-right: 40px;
  position: relative;
}
.mv_release .cta_btn p:last-child::before {
  content: '';
  width: 30px;
  height: 18px;
  background-image: url(/ai-ocr/img/top/icon_arrow_down.svg);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.mv_release .cta_btn:hover {
  background-color: #809BD3;
  box-shadow: none;
  transform: translate(8px, 8px);
}

@media screen and (max-width: 767px) {
  .mv_release .cta_btn {
    width: 94%;
    max-width: 440px;
    background-position: 3% 50%;
    background-size: 30px 20px;
  }
  .mv_release .cta_btn p {
    display: inline-block;
  }
  .mv_release .cta_btn p:first-child {
    color: var(--color-tertiary);
    font-weight: 600;
    font-size: 1.8rem;
  }
  .mv_release .cta_btn p:last-child {
    font-size: 1.8rem;
    color: #fff;
  }
  .mv_release .cta_btn p:last-child::before {
    content: '';
    width: 26px;
    height: 16px;
    top: 50%;
    right: -6px;
  }
}

/*--------------------------------------
本文セクション [ main#release ]
--------------------------------------*/
.section_wrapper p {
  font-size: 1.3rem;
  color: #4A5565;
}

main#release .section_wrapper {
    padding: 48px 0;
}
main#release .section_inner {
    width: 100%;
    padding: 0 5%;
    max-width: 1024px;
    margin: 0 auto;
}
main#release .section_wrapper h2 {
    font-size: 2rem;
    text-align: center;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 32px;
}
main#release .section_wrapper h2::before {
    content: '';
    width: 64px;
    height: 3px;
    border-radius: 9999px;
    background-color: #0044CC;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
}
div.flex {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  main#release .section_wrapper {
    padding: 30px 0;
  }
  div.flex {
    flex-flow: column;
    flex-wrap: wrap;
  }
}
/*--- 諦めていませんか？ [ #akirame ] ---*/
#akirame .flex p {
  align-self: center;
  margin-inline: auto;
  width: 55%;
  max-width: 610px;
  height: auto;
}
#akirame .flex img.po {
  margin-inline: auto;
  width: 45%;
  max-width: 290px;
  height: auto;
  box-shadow: 9px 8px 27px -4px #bababa;
  border-radius: 0px;
}

#akirame .card_wrap {
  margin: 32px auto;
  padding: 16px 32px;
  width: 48%;
  max-width: 600px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}
#akirame .card_wrap .icon {
  position: relative;
  margin-inline: auto;
  width: 64px;
  height: 64px;
  background: #F3F4F6;
  border-radius: 32px;
}
#akirame .card_wrap .icon img {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 32px;
  height: 32px;
}
#akirame .card_wrap h3 {
  margin: 1.6rem 0;
  font-weight: 600;
  font-size: 2.1rem;
  color: #101828;
  text-align: center;
}
#akirame .card_wrap p {
  width: 100%;
  text-align: left;
}

@media screen and (max-width: 767px) {
  #akirame .flex.reverse p {
    align-self: center;
    margin: 30px 0;
    width: 94%;
  }
  #akirame .flex img.po {
    margin-inline: auto;
    width: 80%;
    max-width: 320px;
    height: auto;
  }
  #akirame .card_wrap {
    margin: 0 auto 30px;
    padding: 16px;
    width: 94%;
  }
  #akirame .card_wrap h3 {
    margin: 1rem 0;
    font-size: 2rem;
  }
  #akirame .card_wrap p {
    width: 100%;
    text-align: left;
    margin: 16px 0 0;
  }
}


/*--- 「生成AI (LLM)」が解決します [ #kaiketsu ] ---*/
#kaiketsu { background: #F0F5FA; }

#kaiketsu h2.h2_kaiketsu {
  text-align: left!important;
  margin-bottom: 32px!important;
}
#kaiketsu h2.h2_kaiketsu::before {
  content: none!important;
}
#kaiketsu h2.h2_kaiketsu span.advance {
  display: block;
  margin-bottom: -1rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #0044CC;
}
#kaiketsu .flex.start {
  display: flex;
  align-items: flex-start;
  margin-inline: auto;
}
#kaiketsu .flex_wrap_l {
  width: 55%;
}

ul.ul_card {
  margin: 32px auto;
  padding: 16px 24px;
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}
ul.ul_card li {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 25px;
  line-height: 1.5;
  font-size: 1.4rem;
  font-weight: 600;
}
ul.ul_card li:last-child { margin-bottom: 0 }
ul.ul_card li::before {
  content: url("../img/release/icon-check_circle.svg");
  position: absolute;
  left: 0;
  top: 23%; /* 上から50%の位置に */
  transform: translateY(-50%); /* 自身の高さの半分戻す */
  font-size: 0.6em; /* サイズ調整 */
}
ul.ul_card li p {
  font-weight: 300;
}

#kaiketsu .card_wrap {
  margin-inline: auto;
  padding: 16px;
  width: 46%;
  border: 1px solid #eee;
  border-radius: 6px;
}
#kaiketsu .flex_wrap_r {
  justify-content: space-around;
  align-items: stretch;
  width: 40%;
  margin-left: 5%;
}
#kaiketsu .card_wrap.untilnow {
  align-self: center;
  background: #E5E7EB;
  text-align: center;
}
#kaiketsu .card_wrap.untilnow h3 {
  font-size: 1.5rem!important;
  color: #6A7282;
}
#kaiketsu .card_wrap.untilnow h4 {
  font-size: 1.8rem!important;
  font-weight: 700;
  color: #364153;
}
#kaiketsu .card_wrap.untilnow p,
#kaiketsu .card_wrap.nextgen p{
  font-size: 1.3rem;
  text-align: center;
}

#kaiketsu .card_wrap.nextgen {
  position: relative;
  align-self: center;
  background: #fff;
  border: 2px solid #0044CC;
  text-align: center;
}
#kaiketsu .card_wrap.nextgen h3 {
  font-size: 1.5rem!important;
  color: #0044CC;
}
#kaiketsu .card_wrap.nextgen h4 {
  font-size: 1.8rem!important;
  font-weight: 700;
  color: #0044CC;
}
#kaiketsu .card_wrap.nextgen .tag {
  position: absolute;
  margin-inline: auto;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 14rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 2rem;
  color: #fff;
  background: #0044CC;
  border-radius: 2rem;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  #kaiketsu h2.h2_kaiketsu {
    text-align: center!important;
    padding-bottom: 0;
  }
  #kaiketsu h2.h2_kaiketsu span.advance {
    margin-bottom: 0.6rem;
  }
  #kaiketsu .flex.start {
    display: flex;
    align-items: flex-start;
    margin-inline: auto;
  }
  #kaiketsu .flex_wrap_l {
    margin-inline: auto;
    width: 94%;
  }
  ul.ul_card {
    margin: 30px auto;
    padding: 10px 24px;
  }
  #kaiketsu .card_wrap {
    margin-inline: auto;
    padding: 16px;
    width: 94%;
    border: 1px solid #eee;
    border-radius: 6px;
  }
  #kaiketsu .flex_wrap_r {
    justify-content: space-around;
    align-items: stretch;
    width: 80%;
    margin-inline: auto;
  }
  #kaiketsu .card_wrap.untilnow img,
  #kaiketsu .card_wrap.nextgen img {
    width: 30px;
    height: 30px;
  }
  #kaiketsu .card_wrap.nextgen .tag {
    position: absolute;
    margin-inline: auto;
    top: -1.3rem;
  }
    #kaiketsu .flex_wrap_r .only_sp {
      margin: 1rem auto 2rem;
  }
}

/*--- 新機能による業務フローの進化 [ #flow ] ---*/
main#release #flow.section_wrapper h2 {
  margin-bottom: 24px;
}
#flow p.sub {
  font-size: 1.5rem;
  color: #4A5565;
  text-align: center;
  margin-bottom: 24px;
}

#flow .flowtable.only_pc {
  margin-inline: auto;
  width: 100%;
  max-width: 900px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}
#flow .flowtable table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  font-size: 1.4rem;
}
#flow .flowtable table th,
#flow .flowtable table td {
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  padding: 1rem;
  text-align: center;
}
#flow .flowtable table thead th {
  border-bottom: 1px solid #E5E7EB;
}
#flow .flowtable table thead th.a {
  background-color: #F9FAFB;
  color: #6A7282;
}
#flow .flowtable table thead th.b {
  background-color: #F9FAFB;
  color: #4A5565;
}
#flow .flowtable table thead th.c {
  background-color: #EFF6FF;
  color: #0044CC;
}
#flow .flowtable table tbody th {
  vertical-align: middle;
  color: #364153;
}
#flow .flowtable table tbody td {
  font-weight: 700;
}
#flow .flowtable table tbody td span {
  font-weight: 300;
  color: #1E2939;
}
@media screen and (max-width: 767px) {
  #flow p.sub {
    font-size: 1.3rem;
    margin-bottom: 24px;
    width: 100%;
  }
  #flow .flowtable.only_sp {
    margin-inline: auto;
    width: 94%;
    border: none;
  }
  #flow .flowcard {
    margin: 16px auto 0;
    padding: 0;
    width: 90%;
    background: #F9FAFB;
    border: 1px solid #eee;
    border-radius: 6px;
  }
  #flow .flowcard p.head {
    margin: 0;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 3rem;;
    color: #364153;
    border-bottom: 1px solid #E5E7EB;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
  }
  #flow .flex_wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-self: center;
    background: #fff;
    padding: 12px
  }
  #flow .flex_wrap .box_sofar,
  #flow .flex_wrap .box_new {
    text-align: center;
    width: 50%;
  }
  #flow .flex_wrap .box_sofar {
    border-right: 1px solid #E5E7EB;
  }
  #flow .box_sofar .situation {
    font-size: 1.1rem;
    color: #6A7282;
  }
  #flow .box_sofar .function {
    font-size: 1.4rem;
    padding: 0.5rem 0;
  }
  #flow .box_sofar .exp {
    font-size: 1.1rem;
    color: #99A1AF;
  }
  #flow .box_new .situation {
    font-size: 1.1rem;
    color: #0044CC;
  }
  #flow .box_new .function {
    font-size: 1.6rem;
    font-weight: 700;
    padding: 0.5rem 0;
    color: #0044CC;
  }
  #flow .box_new .exp {
    font-size: 1.1rem;
    color: #4A5565;
  }
}

/*--- 先行トライアル予約受付中 [ #trial ] ---*/
#trial { background: #3A5793; }
#trial h2 {
  color: #fff;
}
#trial h2::before {
  content: none!important;
}
#trial p.sub {
  max-width: 700px;
  font-size: 1.5rem;
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin: -36px auto 24px;
}
#trial .recognition {
  margin-inline: auto;
  padding: 0 24px 0;
  width: 100%;
  max-width: 700px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}
#trial .recognition h3 {
  font-weight: 700;
  font-size: 2rem;
  color: #0044CC;
  text-align: center;
  line-height: 4.8rem;
  border-bottom: 1px solid #eee;
}
#trial .recognition .flex {
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 8px;
}

#trial .recognition .flex p {
  position: relative;
  margin: 0 auto 1rem;;
  padding-left: 25px;
  width: 50%;
  font-size: 1.4rem;
  color: #1E2939;
}
#trial .recognition .flex p::before {
  content: url("../img/release/icon-check_mark.svg");
  position: absolute;
  top: 0.2rem;
  left: 0;
}
@media screen and (max-width: 767px) {
  #trial .recognition .flex {
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-flow: column;
    padding: 16px 8px;
  }
  #trial .recognition .flex p {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  main#release .reverse { flex-flow: column-reverse; }

}

@media screen and (min-width: 1024px) {
    main#release .section_wrapper {
        padding: 80px 0;
    }
    main#release .section_wrapper h2 {
        font-size: 2.8rem;
        padding-bottom: 24px;
        margin-bottom: 64px;
    }
    main#release .section_inner {
        padding: 0 20px;
    }
}

/*--- 以下不使用 ---*/
/*---------------------------------
mv
---------------------------------*/
/*
.mv_under {
  margin: 50px auto 16px;
  background: #F0F5FA;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.mv_under_wrapper {
  padding: 40px 5% 32px;
  position: relative;
}
.mv_under_wrapper::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100vw;
  border-color: transparent  transparent  transparent var(--color-wh);
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: -1;
}
.mv_under_wrapper::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 80px 40vw 0 0;
  border-color: transparent var(--color-quaternary) transparent transparent;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -2;
}
.mv_under h2 {
  text-align: center;
  font-size: clamp(3.2rem, 8.5vw, 4rem);
  color: var(--color-wh);
  margin: 0 auto 32px;
  max-width: 800px;
}
.mv_under h2 img {
  background-color: var(--color-wh);
  width: 90%;
  max-width: 400px;
  display: block;
  margin: 0 auto 8px;
}
.mv_under_message {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.8em;
  color: var(--color-wh);
  max-width: 800px;
  margin: 0 auto 32px;
}
@media screen and (min-width: 768px) {
  .mv_under h2 {
    font-size: 4rem;
    text-align: left;
    line-height: 80px;

  }
  .mv_under h2 img {
    width: 55%;
    display: inline-block;
    margin: 0 20px 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .mv_under {
    margin: 80px auto 16px;
  }

  .mv_under h2 img {
    max-width: 500px;
  }
  .mv_under h2 {
    font-size: 5.2rem;
    line-height: 100px;
    max-width: 1000px;
  }

  .mv_under_message {
    font-size: 2rem;
    margin: 0 auto 56px;
    max-width: 1000px;
  }
}
*/

/*
.release_wrap {
  max-width: 400px;
  margin-inline: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 16px;
  & > * {
    width: 100%;
  }
  .plus p {
    font-size: 48px;
    line-height: 1.0;
    text-align: center;
  }
  .release_item {
    .release_box {
      padding: 24px;
      background-color: #fff;
      border: 1px solid #eee;
      box-shadow: 0 4px 8px rgba(100, 100, 100, 0.15);
      border-radius: 10px;
      div + div {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #ddd;
      }
      h3 {
        margin-bottom: 1em;
        font-size: 18px;
        text-align: center;
      }
      .release {
        text-align: center;
        .number {
          font-size: 2em;
          font-weight: 600;
        }
      }
      .justify {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        align-items: center;
      }
      .release_list {
        .title {
          display: inline-block;
          margin-bottom: 1em;
          padding: .15em 1.0em;
          background-color: #ddd;
          border-radius: 9999px;
          font-weight: 600;
        }
        ul {
          li.number  {
            padding-left: 1em;
            text-indent: -1em;
          }
          li + li {
            margin-top: .5em;
          }
        }
        .flow_list_note {
          margin-top: 24px;
          font-size: 10px;
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  #release.section_wrapper {
    padding-top: 64px;
  }
  .release_wrap {
    max-width: inherit;
    gap: 0;
    & > * {
      justify-content: space-between;
    }
    .plus {
      width: 16%;
      p {
        padding-top: 120px;
      }
    }
    .release_item {
      width: 42%;
      .release_box {
        padding: 24px 32px;
      }
      h3 {
        font-size: 24px;
      }
    }
  }
}
*/
/*---------------------------------
flow
---------------------------------
#flow.section_wrapper {
  background-color: rgba(var(--color-quaternary-rgb), .5);
}
.flow_wrap {
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 12px;
  .flow_item {
    width: calc(100%/2 - 6px);
    padding: 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    h3 {
      margin-bottom: 1em;
      font-size: 14px;
      text-align: center;
    }
    .period {
      padding: 0.5em;
      background-color: #ddd;
      border-radius: 9999px;
      font-weight: 600;
      text-align: center;
    }
    .flow_list {
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid #ddd;
      .title {
        margin-bottom: .5em;
        font-weight: 600;
      }
      ul {
        li.number  {
          padding-left: 1em;
          text-indent: -1em;
        }
        li + li {
          margin-top: .25em;
        }
      }
      .flow_list_note {
        margin-top: 24px;
        font-size: 10px;
      }
    }
  }
}
@media (min-width: 1024px) {
  .flow_wrap {
    gap: 24px;
    max-width: inherit;
    .flow_item {
      width: calc(100%/4 - 18px);
      padding: 24px 16px;
      h3 {
        font-size: 16px;
      }
    }
  }
}
*/

/*---------------------------------
case
---------------------------------*/
#case.section_wrapper {
	.section_inner {
		.sub_heading {
			text-align: center;
			margin-bottom: 1em;
			span {
				display: inline-block;
				padding: .35em 1.25em;
				background-color: #EEF6FF;
				border-radius: 999px;
				color: #0044CC;
				font-size: 12px;
				font-weight: 700;
				line-height: 1;
			}
		}
		.case_content {
			margin-bottom: 32px;
			.case_heading {
				display: flex;
				flex-wrap: wrap;
				gap: 24px;
				background-color: #F1F6FA;
				border-radius: 12px;
				margin-bottom: 24px;
				padding: min(calc(32 / 768 * 100vw), 32px) min(calc(40 / 767 * 100vw), 40px);
				.case_heading_img {
					width: 100%;
				}
				.case_heading_text {
					width: 100%;
					h3 {
						margin-bottom: .5em;
						color: #002B6B;
						font-size: min(calc(18 / 390 * 100vw), 18px);
						line-height: 1.5;
					}
					.case_name {
						margin-bottom: .5em;
						color: #002B6B;
						font-size: 14px;
						font-weight: bold;
						line-height: 1.5;
					}
					p {
						font-size: 13px;
            em {
              font-weight: 700;
              font-style: normal;
            }
					}
				}
			}
			.case_effect {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12px;
				width: 100%;
				margin: 0 auto 32px;
				.case_effect_item {
					width: 100%;
					padding: min(calc(32 / 767 * 100vw), 32px);
					background-color: var(--color-wh);
					border-top: 6px solid #CBD5E1;
					border-radius: 0 0 10px 10px;
					box-shadow: 0 4px 6px -1px rgba(0,0,0, .1);
					hgroup {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						gap: 8px;
						margin-bottom: 1em;
						.tag {
							padding: .75em 1em;
							background-color: #9CA3AF;
							border-radius: 999px;
							color: var(--color-wh);
							font-size: min(calc(10 / 390 * 100vw), 10px);
							font-weight: 700;
							line-height: 1;
						}
						h4 {
							color: #4B5563;
							font-size: min(calc(18 / 390 * 100vw), 18px);
						}
					}
					.case_effect_item_list {
						li {
							position: relative;
							display: flex;
							align-items: center;
							gap: 4px;
							color: #6B7280;
							font-size: 13px;
							line-height: 1.25;
							font-feature-settings: "palt";
							&::before {
								flex-shrink: 0;
								content: '';
								width: 1.15em;
								height: 1.15em;
								background-size: contain;
								background-image: url(../img/release/icon-cancel_red.svg);
							}
							em {
								color :#DC2626;
								font-size: 1.25em;
								font-weight: 700;
								font-style: normal;
							}
							& + li {
								margin-top: .5em;
							}
						}
					}
					.case_effect_summary {
						margin-top: 18px;
						padding-top: 18px;
						border-top: 1px solid #005BAC;
						p {
							color: #1E3A5F;;
							font-size: min(calc(14 / 390 * 100vw), 14px);
							line-height: 1.25;
							em {
								color :#002B6B;
								font-size: 1.714em;
								font-weight: 700;
								font-style: normal;
							}
						}
					}
					&.after {
						background-color: #F8FBFF;
						border-top: 6px solid #005BAC;
						hgroup {
							.tag {
								background-color: #005BAC;
							}
							h4 {
								color: #002B6B
							}
						}
						.case_effect_item_list {
							li {
								color: #1E3A5F;
								&::before {
									background-image: url(../img/release/icon-check_mark_blue.svg);
								}
								em {
									color :#1E3A5F;
								}
							}
						}
					}
				}
				.arrow_triangle {
					background: #005BAC;
					height: 24px;
					width: 30px;
					clip-path: polygon(0 0, 100% 0, 50% 100%);
				}
			}
			.case_summary {
				h4 {
					position: relative;
					display: flex;
					align-items: center;
					margin-bottom: 1em;
					color: #002B6B;
					font-size: min(calc(18 / 390 * 100vw), 18px);
					&::before {
						content: "";
						height: 4px;
						width: 1.25em;
						background-color: #002B6B;
						border-radius: 5px;
						transform: rotate(90deg);
					}
				}
				.text_link {
					margin-top: 1em;
				}
			}
		}
	}
	.cta_btn {
		a {
			padding: 1em 0;
		}
		p:last-child {
			font-size: 2.0rem;
		}
		&::before {
			aspect-ratio: 30 / 18;
			width: 24px;
			height: auto;
		}
	}
}
@media screen and (min-width: 768px) {
	#case.section_wrapper {
		.section_inner {
			.sub_heading {
				span {
					font-size: 14px;
				}
			}
			h2 {
				margin-bottom: 32px;
			}
			.case_content {
				margin-bottom: 48px;
				.case_heading {
					justify-content: space-between;
					gap: 0;
					border-radius: 16px;
					padding: 24px min(calc(40 / 1024 * 100vw), 40px);
					.case_heading_img {
						width: 35%;
					}
					.case_heading_text {
						width: 60%;
						h3 {
							font-size: clamp(18px, calc(20 / 1024 * 100vw), 20px);
						}
						.case_name {
							font-size: 14px;
						}
						p {
							font-size: 14px;
						}
					}
				}
				.case_effect {
					flex-direction: row;
					align-items: flex-start;
					gap: 16px;
					.case_effect_item {
						flex: 1;
						padding: min(calc(32 / 1024 * 100vw), 32px) min(calc(24 / 1024 * 100vw), 24px) 20px;
						hgroup {
							margin-bottom: 1em;
							.tag {
								font-size: clamp(8px, calc(10 / 1024 * 100vw), 10px);
							}
							h4 {
								font-size: clamp(16px, calc(18 / 1024 * 100vw), 18px);
							}
						}
						.case_effect_item_list {
							li {
								font-size: clamp(12px, calc(14 / 1024 * 100vw), 14px);
								em {
									font-size: 1.4285em;
								}
							}
						}
						.case_effect_summary {
							margin-top: 18px;
							padding-top: 18px;
							p {
								color: #1E3A5F;;
								font-size: clamp(12px, calc(14 / 1024 * 100vw), 14px);
							}
						}
					}
					.arrow_triangle {
						margin-top: min(calc(64 / 1024 * 100vw), 64px);
						height: 30px;
						width: 24px;
						clip-path: polygon(0 0, 100% 50%, 0 100%);
					}
				}
				.case_summary {
					h4 {
						font-size: clamp(16px, calc(18 / 1024 * 100vw), 18px);
					}
					p {
						font-size: clamp(14px, calc(16 / 1024 * 100vw), 16px);
					}
				}
			}
		}
	}
}

.text_link {
	a {
		color: #004EEA;
		text-decoration: underline;
		transition: all 0.3s 0s ease;
		&.triangle {
			position: relative;
			padding-left: 1.1em;
			&::before {
				content: "";
				display: inline-block;
				position: absolute;
				top: .25em;
				left: 0;
				width: .75em;
				height: 1em;
				background-color: #004EEA;
				clip-path: polygon(0 0, 0% 100%, 100% 50%);
			}
		}
		&:hover {
			text-decoration: none;
		}
	}
}