.modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background-color: rgba(48, 49, 80, 0.6);
  pointer-events: none;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .modal[data-modal="comparison"] .modal_table tbody .modal_table_cell__inner {
    font-size: 1.4rem;
    line-height: 1.42857;
  }
}

@media (min-width: 768px) {
  .modal[data-modal="license"] .modal_table colgroup .__user {
    width: 60%;
  }
}

.modal[data-modal="license"] .modal_table colgroup .__price {
  width: 43.33333vw;
}

@media (min-width: 768px) {
  .modal[data-modal="license"] .modal_table colgroup .__price {
    width: calc(100% - 365px);
  }
}

@media (min-width: 768px) {
  .modal[data-modal="appsuite"] .modal_table colgroup .__user {
    width: 50%;
  }
}

.modal[data-modal="appsuite"] .modal_table colgroup .__price {
  width: 43.33333vw;
}

@media (min-width: 768px) {
  .modal[data-modal="appsuite"] .modal_table colgroup .__price {
    width: calc(100% - 365px);
  }
}

@media (min-width: 768px) {
  .modal[data-modal="calculate"] .modal_content,
  .modal[data-modal="web"] .modal_content {
    margin-top: 30px;
  }
}

.modal_container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.modal_contents {
  position: relative;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .modal_contents {
    margin: 0 auto;
  }
}

.modal_contents__inner {
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  z-index: 1;
  padding: 7.66667vw 0 9.86667vw;
  max-width: 82.66667vw;
  max-height: 90vh;
}

@media (min-width: 768px) {
  .modal_contents__inner {
    padding: 70px 50px 46px;
    max-height: 85vh;
    margin: 0 10px;
    width: 100%;
    max-width: 1200px;
  }
}
@media (max-width: 63.75em) and (min-width: 48em){
  .modal_contents__inner {
    padding: 30px 50px 46px;
  }
}
.modal_contents__inner::before {
  content: "";
  position: absolute;
  top: -14.13333vw;
  right: -9.6vw;
  width: 29.33333vw;
  height: 29.33333vw;
  -webkit-transform: rotate(48deg);
  transform: rotate(48deg);
  background: none;
}

@media (min-width: 768px) {
  .modal_contents__inner::before {
    top: -360px;
    right: -111px;
    width: 400px;
    height: 400px;
  }
}

.modal_blocks + .modal_blocks {
  margin-top: 16vw;
}

@media (min-width: 768px) {
  .modal_blocks + .modal_blocks {
    margin-top: 30px;
  }
}

.modal_ttl {
  padding: 0 6.4vw;
  color: #372eb2;
  font-size: 4.8vw;
  line-height: 1.5;
}
.modal_ttl.text_px22 {
  font-size: 22px;
}
@media (min-width: 768px) {
  .modal_ttl {
    padding: 0;
    letter-spacing: 0.02em;
    font-size: 3.0rem;
    line-height: 1.4;
  }
}

.modal_lead {
  margin-top: 2.4vw;
  padding: 0 6.4vw;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .modal_lead {
    margin-top: 12px;
    padding: 0;
  }
}

.modal_content {
  margin-top: 12.8vw;
}

@media (min-width: 768px) {
  .modal_content {
    margin-top: 20px;
  }
  .modal_content + .modal_content {
    margin-top: 60px;
  }
}

.modal_content.__second {
  margin-top: 3.73333vw;
}

@media (min-width: 768px) {
  .modal_content.__second {
    margin-top: 0;
  }
}
.modal_block_annotation + .modal_block__wrapper {
  margin-top:50px;
  }
@media (min-width: 768px) {
  .modal_block__wrapper {
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    gap: 30px;
  }
}
@media (max-width: 63.75em) and (min-width: 48em){
  .modal_block__wrapper {
    flex-wrap: wrap;
    gap: 30px;
  }
}
@media (min-width: 768px) {
  .modal_block__wrapper .modal_block {
    width: 530px;
  }
}

@media (min-width: 768px) {
  .modal_block__wrapper .modal_block.modal_block {
    margin-top: 0;
  }
}

.modal_block {
  width: 100%;
}

.modal_block + .modal_block {
  margin-top: 15.46667vw;
}

@media (min-width: 768px) {
  .modal_block + .modal_block {
    margin-top: 50px;
  }
}

.modal_block_ttl {
  margin-bottom: 3.2vw;
  padding: 0 6.4vw;
  color: #372eb2;
}

@media (min-width: 768px) {
  .modal_block_ttl {
    margin-bottom: 10px;
    padding: 0;
    font-size: 2.4rem;
  }
}

.modal_block_subTtl {
  margin-top: 10.66667vw;
  margin-bottom: 5.33333vw;
  padding: 0 6.4vw;
  letter-spacing: 0em;
  color: #372eb2;
  font-size: 4.26667vw;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .modal_block_subTtl {
    margin-top: 0px;
    margin-bottom: 0;
    padding: 0;
    font-size: 2.0rem;
    line-height: 1.6;
  }
}

.modal_block_lead {
  margin-top: 2.66667vw;
  padding: 0 6.4vw;
}

@media (min-width: 768px) {
  .modal_block_lead {
    margin-top: 22px;
    padding: 0;
  }
}

.modal_table__wrapper {
  overflow-x: scroll;
  padding: 0 6.4vw;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
}

@media (min-width: 768px) {
  .modal_table__wrapper {
    overflow-x: auto;
    padding: 0;
  }
}

.modal_table__wrapper::-webkit-scrollbar {
  display: none;
}

.modal_table {
  width: 100%;
  border-collapse: collapse;
}

.modal_table.__row2 {
  width: 141.33333vw;
}

@media (min-width: 768px) {
  .modal_table.__row2 {
    width: 530px;
  }
}

.modal_table.__row3,
.modal_table.__row4,
.modal_table.__row5 {
  width: 293.33333vw;
}

@media (min-width: 768px) {
  .modal_table.__row3,
  .modal_table.__row4,
  .modal_table.__row5 {
    width: 100%;
  }
}

.modal_table.__row_diff {
  width: 293.06667vw;
}

@media (min-width: 768px) {
  .modal_table.__row_diff {
    width: 100%;
  }
}

.modal_table colgroup .__row2 {
  width: 50%;
}

.modal_table colgroup .__row3 {
  width: calc(100% / 3);
}

.modal_table colgroup .__row4 {
  width: 25%;
}

.modal_table colgroup .__row5 {
  width: 20%;
}

.modal_table colgroup .__diff1 {
  width: 60.66667vw;
}

@media (min-width: 768px) {
  .modal_table colgroup .__diff1 {
    width: 226px;
  }
}

.modal_table colgroup .__diff2 {
  width: 116vw;
}

@media (min-width: 768px) {
  .modal_table colgroup .__diff2 {
    width: 435px;
  }
}

.modal_table thead {
  background-color: #372eb2;
}

.modal_table thead.__column2 {
  background-color: #dae4fe;
}

.modal_table thead.__column2 th.__top {
  background-color: #372eb2;
}

.modal_table thead.__column2 th.__top .modal_table_cell__inner {
  line-height: 1.5;
}

.modal_table thead.__column2 th.__top.__top--large {
  height: 21.33333vw;
}

@media (min-width: 768px) {
  .modal_table thead.__column2 th.__top.__top--large {
    height: 80px;
  }
}

.modal_table thead.__column2 th.__bottom:nth-of-type(n + 2) {
  position: relative;
}

.modal_table thead.__column2 th.__bottom:nth-of-type(n + 2)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.26667vw;
  margin: auto;
  width: 0.26667vw;
  height: 13.6vw;
  background-color: #fff;
}

@media (min-width: 768px) {
  .modal_table thead.__column2 th.__bottom:nth-of-type(n + 2)::before {
    left: -1px;
    width: 1px;
    height: 51px;
  }
}

.modal_table thead.__column2 th.__bottom .modal_table_cell__inner {
  color: #333;
  line-height: 1.5;
}

.modal_table thead th {
  border: solid 0.26667vw #dae4fe;
  height: 13.33333vw;
}

@media (min-width: 768px) {
  .modal_table thead th {
    border: solid 1px #dae4fe;
    height: 50px;
  }
}

.modal_table thead th.__item {
  background-color: #fff;
}

.modal_table thead th.__small {
  background-color: #4376d7;
}

.modal_table thead th.__prize {
  background-color: #2a36aa;
}

.modal_table thead th.__small .modal_table_cell__inner,
.modal_table thead th.__prize .modal_table_cell__inner {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  .modal_table thead th.__small .modal_table_cell__inner,
  .modal_table thead th.__prize .modal_table_cell__inner {
    font-size: 1.6rem;
  }
}

.modal_table thead .modal_table_cell__inner {
  color: #fff;
  font-size: 3.73333vw;
  font-weight: bold;
}

@media (min-width: 768px) {
  .modal_table thead .modal_table_cell__inner {
    letter-spacing: 0em;
    font-size: 1.4rem;
    line-height: 1.71429;
  }
}

.modal_table thead .modal_table_cell__inner > span {
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  .modal_table thead .modal_table_cell__inner > span {
    letter-spacing: 0em;
    font-size: 1.2rem;
    line-height: 2;
  }
}

.modal_table tbody td {
  border: solid 0.26667vw #dae4fe;
  height: 13.33333vw;
  background-color: #fff;
}

@media (min-width: 768px) {
  #table03 .modal_table tbody tr:nth-of-type(1) td {
    border: solid 1px #dae4fe;
    height: 150px;
  }
  #table03 .modal_table tbody tr:nth-of-type(2) td {
    border: solid 1px #dae4fe;
    height: 100px;
  }
  .modal_table tbody td {
    border: solid 1px #dae4fe;
    height: 50px;
  }
}

.modal_table tbody td.__item {
  border-bottom: solid 0.26667vw #fff;
  background-color: #dfebfe;
}

@media (min-width: 768px) {
  .modal_table tbody td.__item {
    border-bottom: solid 1px #fff;
  }
}

.modal_table tbody td.__item .modal_table_cell__inner {
  color: #2a36aa;
  font-size: 3.2vw;
  font-weight: bold;
}

@media (min-width: 768px) {
  .modal_table tbody td.__item .modal_table_cell__inner {
    font-size: 1.4rem;
  }
}

.modal_table tbody .modal_table_cell__inner {
  text-align: center;
  color: #333;
  font-size: 3.73333vw;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner {
    letter-spacing: 0em;
    font-size: 1.6rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__user,
.modal_table tbody .modal_table_cell__inner.__room {
  font-family: "Roboto", "Noto Sans", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__user,
  .modal_table tbody .modal_table_cell__inner.__room {
    font-size: 1.6rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__user span,
.modal_table tbody .modal_table_cell__inner.__room span {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__user span,
  .modal_table tbody .modal_table_cell__inner.__room span {
    font-size: 1.4rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__service {
  font-size: 4.26667vw;
  font-weight: bold;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__service {
    font-size: 1.6rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__service span {
  font-size: 3.73333vw;
  font-weight: normal;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__service span {
    font-size: 1.4rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4.8vw;
  color: #372eb2;
  font-weight: bold;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__price {
    padding-right: 20px;
  }
}

.modal_table tbody .modal_table_cell__inner.__price .__num {
  letter-spacing: -0.01em;
  font-family: "Roboto", "Noto Sans", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 6.4vw;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__price .__num {
    font-size: 2.2rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__price .__yen,
.modal_table tbody .modal_table_cell__inner.__price .__year {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__price .__yen,
  .modal_table tbody .modal_table_cell__inner.__price .__year {
    font-size: 1.4rem;
  }
}

.modal_table tbody .modal_table_cell__inner.__inquiry {
  color: #2a36aa;
  font-weight: bold;
}

@media (min-width: 768px) {
  .modal_table tbody .modal_table_cell__inner.__inquiry {
    font-size: 2rem;
  }
}

.modal_table_scroll {
  position: relative;
  margin: 5.33333vw auto 0;
  width: 69.33333vw;
  height: 2.66667vw;
  background-color: #dfebfe;
}

@media (min-width: 768px) {
  .modal_table_scroll {
    display: none;
  }
}

.modal_table_scroll_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 32vw;
  height: 100%;
  background-color: #372eb2;
}

.modal_block_annotation,
.modal_block_annotation_list {
  margin-top: 7.2vw;
  padding: 0 6.4vw;
}

@media (min-width: 768px) {
  .modal_block_annotation,
  .modal_block_annotation_list {
    margin-top: 20px;
    padding: 0;
  }
}

.modal_block_annotation {
  padding: 0 6.4vw;
}

@media (min-width: 768px) {
  .modal_block_annotation {
    padding: 0;
  }
}

.modal_block_annotation_txt,
.modal_block_annotation_listItem {
  padding-left: 1em;
  text-indent: -1em;
  letter-spacing: 0em;
}

.modal_close_btn__wrapper {
  margin: 12vw auto 0;
  padding: 0 6.4vw;
}

@media (min-width: 768px) {
  .modal_close_btn__wrapper {
    margin-top: 60px;
    padding: 0;
  }
}

.modal_block_annotation_listItem + .modal_block_annotation_listItem {
  margin-top: 1.06667vw;
}

@media (min-width: 768px) {
  .modal_block_annotation_listItem + .modal_block_annotation_listItem {
    margin-top: 4px;
  }
}

@media (min-width: 768px) {
  .modal_close_btn {
    cursor: pointer;
  }
}

.modal_close_btn--top {
  position: absolute;
  top: -7vw;
  right: 0;
  width: 4vw;
  height: 4vw;
}

@media (min-width: 768px) {
  .modal_close_btn--top {
    top: -56px;
    right: -4px;
    width: 46px;
    height: 46px;
    cursor: pointer;
  }
}
@media (max-width: 63.75em) and (min-width: 48em){
  .modal_close_btn--top {
    top: -26px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.modal_close_btn--top > button {
  display: block;
  width: 100%;
  height: 100%;
}

.modal_close_btn--top .modal_close_icon {
  width: 6vw;
  height: 6vw;
  pointer-events: none;

  --icon_width: 6vw;
  --icon_height: 6vw;
}

@media (min-width: 768px) {
  .modal_close_btn--top .modal_close_icon {
    width: 36px;
    height: 36px;

    --icon_width: 36px;
    --icon_height: 36px;
  }
}
@media (max-width: 63.75em) and (min-width: 48em){
  .modal_close_btn--top .modal_close_icon {
    width: 20px;
    height: 20px;

    --icon_width: 20px;
    --icon_height: 20px;
  }
}
.modal_close_btn--top .modal_close_icon > svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: var(--icon_width);
  height: var(--icon_height);

  fill: #fff;
}

.modal_close_btn--bottom.c-btn {
  margin: 0 auto;
  border-radius: 5.33333vw;
  width: 66.66667vw;
  height: 10.66667vw;
}

@media (min-width: 768px) {
  .modal_close_btn--bottom.c-btn {
    border-radius: 33px;
    width: 420px;
    height: 66px;
  }
}

@media (min-width: 768px) {
  .modal_close_btn--bottom .c-btn_icon._plus {
    --icon_width: 20px;
    --icon_height: 20px;
    --icon_rightPos: 40px;
  }
}
.p-intro__block_link.c-btn {
    border-radius: 5.33333vw;
    width: 58.66667vw;
    height: 10.66667vw;
    margin: 0 auto;
}
.p-intro__block_link_txt {
    font-size: 4.26667vw;
    font-weight: bold;
}
.modal_img{
  float: none;
  width: 60%;
  margin: 10px auto;
  text-align: center;
}
@media (min-width: 768px) {
    .p-intro__block_link.c-btn {
        border-radius: 28px;
        width: 320px;
        height: 56px;
    }
      .p-intro__block_link_txt {
        font-size: 1.8rem;
    }
  .c-btn_icon._plus {
        --icon_width: 22px;
        --icon_height: 22px;
        --icon_rightPos: 11px;
    }
  .modal_img{
  float: right;
  width: 200px;
}
}