@charset "UTF-8";
/*====================================================

        font set

====================================================*/
@font-face {
  font-family: 'icon';
  src: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.eot?23to49");
  src: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.eot?23to49#iefix") format("embedded-opentype"), url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.ttf?23to49") format("truetype"), url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.woff?23to49") format("woff"), url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.svg?23to49#icon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"], i {
  font-family: 'icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.arrow_border_bottom01:before {
  content: "\e900";
  color: #af207f; }

.arrow_border_right01:before {
  content: "\e901";
  color: #00306b; }

.icon_cantact_catalog:before {
  content: "\e902";
  color: #fff; }

.icon_inquiry:before {
  content: "\e903";
  color: #fff; }

.icon_tel:before {
  content: "\e904";
  color: #fff; }

.icon_download:before {
  content: "\e905";
  color: #186eb4; }

.icon_list:before {
  content: "\e906";
  color: #b9c0c8; }

.icon_list:after {
  content: "\e907";
  margin-left: -1em;
  color: #af207f; }

.icon_blockquote01:before {
  content: "\e908";
  color: #ac257d; }

.icon_blockquote02:before {
  content: "\e909";
  color: #ac257d; }

.icon_onlinedemo:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url("https://www.obc.co.jp/hubfs/obc/v1/images/common/icon_onlinedemo.svg") no-repeat 0 0/cover; }

.icon_movie:before {
  position: relative;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/common/arrow_circle_wh01.svg) no-repeat;
  background-size: 16px 16px;
  top: -3px;
  color: #fff; }

.icon_document::before {
  content: "";
  display: inline-block;
  width: 16.28px;
  height: 20px;
  background: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/icon_document.svg") no-repeat 0 0/cover; }

.icon_document_white::before {
  content: "";
  display: inline-block;
  width: 17.5px;
  height: 21.5px;
  background: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/Icon_document_w.svg") no-repeat 0 0/cover; }

.balloon strong {
  font-size: 17px; }

@media screen and (max-width: 768px) {
  .balloon strong {
    font-size: 14px; } }

.arrow_none::before {
  display: none !important; }

.c-circle {
  background-color: #009ED4; }

@media screen and (max-width: 768px) {
  .c-check-mark {
    padding: 2px 10px 5px 30px; } }

.mb-br {
  display: none; }

@media screen and (max-width: 768px) {
  .mb-br {
    display: block; } }

.pc-br {
  display: block; }

@media screen and (max-width: 768px) {
  .pc-br {
    display: none; } }

.bt-ft-size {
  font-size: 48px; }

@media screen and (max-width: 768px) {
  .bt-ft-size {
    font-size: 30px; } }

.c-head-text {
  font-size: 32px;
  text-align: center;
  font-weight: bold;
  padding-bottom: 57px; }

@media screen and (max-width: 768px) {
  .c-head-text {
    font-size: 22px;
    padding-bottom: 5px; } }

.p-hero.renew2410 .mv-conversion .balloon {
  padding: 10px 60px !important;
  top: 15px; }

@media screen and (max-width: 768px) {
  .p-hero.renew2410 .mv-conversion .balloon {
    padding: 10px 20px !important;
    top: 10px; } }

.p-hero.renew2410 .mv-conversion-button {
  background-image: unset !important; }

.p-hero.renew2410 .mv-conversion-wrap .mv-conversion-button {
  padding: 26px 20px;
  height: 77px !important;
  width: 82%; }

@media screen and (max-width: 768px) {
  .p-hero.renew2410 .mv-conversion-wrap .mv-conversion-button {
    background-position: 10px;
    background-size: 40.5px 26px;
    font-size: 16px;
    height: auto !important;
    padding: 20px;
    width: 100%; } }

.p-hero.renew2410 .mv-conversion-wrap .mv-conversion-button:after {
  margin-top: -6px; }

@media screen and (max-width: 768px) {
  .c-head-section--renew2025 {
    font-size: 22px;
    text-align: center; } }

.p-hero.renew2410 .p-hero-head h2 small {
  padding-bottom: 15px; }

.c-check-mark::before {
  background-color: #009ED4;
  border-color: #009ED4; }

.p-hero.renew2410 .mv-conversion-button:after {
  top: 58%; }

.p-accurate {
  background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/hotei/index_renew/accurate_back.png); }

.p-accurate .u-fontsize--huge--sm {
  max-width: 870px;
  margin: 0 auto; }

@media screen and (max-width: 768px) {
  .c-button.orange {
    padding: 12px 20px !important;
    font-size: 14px !important;
    max-width: 300px !important; } }

.head__flow_list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: center;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 80px;
  padding: 40px 0; }

@media screen and (max-width: 768px) {
  .head__flow_list {
    display: -ms-grid;
    display: grid;
    max-width: 235px;
    margin: 0px 13.5% auto; } }

.head__flow_list .flow-item:nth-child(1) {
  -ms-flex: 0 0 calc(27% - 10px);
  flex: 0 0 calc(27% - 10px); }

.head__flow_list .flow-item:nth-child(2) {
  -ms-flex: 0 0 calc(36.5% - 10px);
  flex: 0 0 calc(36.5% - 10px); }

.head__flow_list .flow-item:nth-child(3) {
  -ms-flex: 0 0 calc(21% - 10px);
  flex: 0 0 calc(21% - 10px); }

.head__flow_list h4.head {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #009ed4;
  color: #fff;
  font-size: 16px;
  height: 60px;
  margin: -60px -20px 30px;
  font-weight: bold;
  font-size: 20px; }

@media screen and (max-width: 768px) {
  .head__flow_list h4.head {
    margin: -60px -20px 0px;
    font-size: 16px;
    padding: 10px; } }

.head__flow_list h4.head:after {
  background-color: #009ed4;
  -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  clip-path: polygon(0 100%, 100% 50%, 0 0);
  content: "";
  height: 60px;
  left: 99.8%;
  padding: 20px;
  position: absolute;
  top: 0;
  width: 40px; }

.order .c-order {
  position: absolute;
  top: -30px;
  left: 43%;
  font-size: 21px;
  color: #333;
  padding: 4px 20px;
  text-align: center;
  border: 2px solid #EDEDED;
  background: #fff;
  font-weight: bold; }

.order .order_box {
  position: relative;
  background-color: #F2F2F2; }

.order .order_box + .order_box {
  margin-top: 50px; }

.order .order_box .c-flex-wrap {
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto; }

.order .order_box__txt .box__steps-grid {
  padding: 35px 15px 35px 0px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -ms-flex-align: center;
  align-items: center; }

@media screen and (max-width: 768px) {
  .order .order_box__txt .box__steps-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding: 10px 0 0 0;
    max-width: 300px;
    margin: 0 auto; } }

.order .order_box__txt .box__step-item {
  position: relative;
  width: 125px;
  background: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 105px;
  text-align: center;
  font-weight: bold; }

.order .order_box__txt .box__step-item::after {
  content: "";
  position: absolute;
  webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  clip-path: polygon(0 100%, 100% 50%, 0 0);
  content: "";
  left: 100%;
  padding: 10px;
  top: 0;
  background-color: #ffffff;
  height: 105px; }

.order .order_box__txt .box__step-item small {
  font-size: 13px; }

.order .order_box__txt .box__step-number {
  position: absolute;
  top: -13px;
  left: -5px;
  width: 32px;
  height: 32px;
  background: #F5FCFE;
  color: #009ED4;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold; }

.order_box_blue {
  position: relative;
  background-color: #009ED4;
  margin-top: 60px; }

.order_box_blue .c-order {
  position: absolute;
  top: -30px;
  left: 43%;
  font-size: 21px;
  color: #333;
  padding: 4px 20px;
  text-align: center;
  border: 2px solid #009ED4;
  background: #fff;
  font-weight: bold; }

.order_box_blue .box__steps-grid {
  padding: 35px 0px 35px 0px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -ms-flex-align: center;
  align-items: center; }

@media screen and (max-width: 768px) {
  .order_box_blue .box__steps-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    gap: 20px 16px;
    padding: 10px 0 0 0;
    max-width: 300px;
    margin: 0 auto; } }

.order_box_blue .box__step-item {
  position: relative;
  width: 350px;
  background: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 150px;
  text-align: center;
  font-weight: bold; }

@media screen and (max-width: 768px) {
  .order_box_blue .box__step-item {
    width: 270px;
    height: 90px; } }

.order_box_blue .box__step-item::after {
  content: "";
  position: absolute;
  webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  clip-path: polygon(0 100%, 100% 50%, 0 0);
  content: "";
  left: 99.8%;
  padding: 20px;
  top: 0;
  background-color: #ffffff;
  height: 150px; }

@media screen and (max-width: 768px) {
  .order_box_blue .box__step-item::after {
    height: 90px; } }

.order_box_blue .box__step-number {
  position: absolute;
  top: -13px;
  left: -5px;
  width: 32px;
  height: 32px;
  background: #F5FCFE;
  color: #009ED4;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold; }

.order_box_blue .box__step-text {
  font-size: 20px; }

@media screen and (max-width: 768px) {
  .order_box_blue .box__step-text {
    font-size: 14px; } }

@media screen and (max-width: 768px) {
  .order_box,
  .order_box_blue {
    padding: 30px 20px 20px; }
  .order_box .c-order,
  .order_box_blue .c-order {
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px; }
  .order_box .c-lead--large,
  .order_box_blue .c-lead--large {
    text-align: center; } }

.bubble-content small {
  text-align: right;
  display: block;
  padding-top: 10px; }

@media screen and (max-width: 768px) {
  .bubble-content small {
    font-size: 70%; } }

.bubble-content .speechBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
  padding: 16px;
  border: 2px solid #009ed4;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 23px;
  font-weight: bold;
  color: #000000; }

@media screen and (max-width: 768px) {
  .bubble-content .speechBubble {
    font-size: 16px; } }

.bubble-content .speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 21px 0 21px;
  border-color: #009ed4 transparent transparent;
  translate: -50% 100%; }

.bubble-content .speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 17.2px 18.1px 0 18.1px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%; }

.bubble-content .flow__box__long {
  height: 137px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center; }

.bubble-content .p-reason__head {
  position: relative; }

.bubble-content .p-reason__head::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 158px;
  height: auto;
  top: -117%;
  left: 83%;
  aspect-ratio: 449 / 548;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain; }

@media screen and (max-width: 768px) {
  .bubble-content .p-reason__head::after {
    width: 60px;
    top: -34%; } }

.p-reason_wrap {
  padding: 5px 0px 10px 0px;
  background-color: #E2F7FE; }

.p-reason__head {
  background: #009ed4;
  position: relative; }

@media screen and (max-width: 768px) {
  .p-reason__head {
    padding: 25px 15px;
    font-size: 18px; } }

.p-reason__head dl {
  max-width: unset; }

.p-reason__head dd {
  margin-left: unset; }

.p-reason__head_icon01::after {
  background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/hotei/index_renew/time-icon01.svg); }

.p-reason__head_icon02::after {
  background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/hotei/index_renew/time-icon02.svg); }

.p-reason__detail {
  background-color: #E2F7FE;
  margin: 0px;
  padding: 20px 30px;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  gap: 65px;
  -ms-flex-pack: justify;
  justify-content: space-between; }

@media screen and (max-width: 768px) {
  .p-reason__detail {
    padding: 20px 25px;
    display: block; } }

.p-reason__detail .long_box {
  width: 50%; }

@media screen and (max-width: 768px) {
  .p-reason__detail .long_box:nth-of-type(2) {
    padding-bottom: unset; } }

@media screen and (max-width: 768px) {
  .p-reason__detail .long_box {
    width: 100%; } }

.p-reason__detail .long_box::after {
  top: 64% !important;
  right: -53px !important; }

@media screen and (max-width: 768px) {
  .p-reason__detail .long_box::after {
    top: 87% !important;
    right: 43% !important; } }

.p-reason__detail .long_box:nth-of-type(2)::after {
  display: none; }

.p-reason__detail .flow__box {
  position: relative; }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box:nth-of-type(3) {
    padding-bottom: unset; } }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box {
    padding-bottom: 5rem; } }

.p-reason__detail .flow__box__inner {
  text-align: center;
  background: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px; }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box__inner {
    font-size: 15px; } }

.p-reason__detail .flow__box__mini {
  padding: 22px 82px; }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box__mini {
    padding: 20px; } }

.p-reason__detail .flow__box__normal {
  padding: 32px 40px;
  height: 220px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center; }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box__normal {
    padding: 32px;
    height: unset; } }

.p-reason__detail .flow__box__long {
  padding: 22px 45px; }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box__long {
    padding: 22px 30px; } }

.p-reason__detail .flow__box .section-heading {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  text-align: center;
  gap: 20px;
  padding-bottom: 15px; }

.p-reason__detail .flow__box .section-heading__text {
  font-size: 23px;
  color: #009ED4;
  font-weight: bold; }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box .section-heading__text {
    font-size: 18px; } }

.p-reason__detail .flow__box:nth-of-type(3)::after {
  display: none; }

.p-reason__detail .flow__box::after {
  content: "";
  position: absolute;
  top: 57%;
  right: -55px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #009ED4;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%); }

@media screen and (max-width: 768px) {
  .p-reason__detail .flow__box::after {
    top: 90%;
    right: 44%;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%); } }

.modal-section {
  background-color: #F5FCFE; }

@media screen and (max-width: 768px) {
  .modal-section .p-reason__head {
    padding: 15px 15px;
    font-size: 18px; } }

.modal-section .p-reason__detail .flow__box::after {
  display: none; }

.modal-section .flow__box__long {
  padding: 22px 60px; }

.modal-section figure {
  margin: unset !important; }

.modal-section .flow__box__long {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 60px;
  -ms-flex-pack: start;
  justify-content: flex-start;
  height: 148px; }

@media screen and (max-width: 768px) {
  .modal-section .flow__box__long {
    display: block;
    padding: 22px 40px;
    height: auto; } }

@media screen and (max-width: 768px) {
  .modal-section .flow__box__long img {
    width: 50%;
    padding-bottom: 10px; } }

.modal-section .flow__box__long_list {
  text-align: left;
  font-size: 19px; }

@media screen and (max-width: 768px) {
  .modal-section .flow__box__long_list {
    font-size: 15px; } }

.modal-section .flow__box__long_list li {
  position: relative; }

.modal-section .flow__box__long_list li::before {
  content: '';
  display: inline-block;
  position: absolute;
  border-color: #009ED4;
  background-color: #009ED4;
  width: 7px;
  height: 7px;
  border-radius: 100vh;
  top: 35%;
  left: -17px; }

@media screen and (max-width: 768px) {
  .modal-section .flow__box__long_list li::before {
    top: 38%; } }

.modal-section .flow__box_button {
  background: #F5FCFE;
  padding: 10px 76px 10px 0;
  text-align: right;
  font-size: 14px;
  color: #009ed4;
  position: relative; }

.modal-section .flow__box_button::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 0;
  border-right: 2px solid #009ED4;
  border-bottom: 2px solid #009ED4;
  transform: rotate(-45deg) translate(50%, 0);
  transform-origin: 50% 50%;
  position: absolute;
  right: 52px;
  top: 45%; }

.modal-section .detail-button:hover {
  cursor: pointer;
  opacity: 0.8; }

.section-heading::before,
.section-heading::after {
  content: "";
  -ms-flex: 1;
  flex: 1;
  height: 2px;
  background-color: #009ED4; }

.c-button--renew2025.orange {
  border-color: #e76f02;
  font-size: 16px;
  padding: 16px 25px;
  width: 350px;
  position: relative; }

.c-head-sub {
  text-align: center; }

.c-head-sub em {
  display: inline-block;
  padding: 0px 15px;
  font-size: 28px;
  text-shadow: none;
  color: #fff !important;
  background: #009ED4; }

@media screen and (max-width: 768px) {
  .c-head-sub em {
    font-size: 20px; } }

.p-page__flow_list .box_list_flex .c-flex04 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%; }

.p-page__flow_list .box_list_flex .c-flex04 .box_inner {
  position: relative; }

.p-page__flow_list .box_list_flex .c-flex04 .box_inner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -62px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #009ED4;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%); }

@media screen and (max-width: 768px) {
  .p-page__flow_list .box_list_flex .c-flex04 .box_inner::after {
    top: 122%;
    right: 38%;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%); } }

.p-page__flow_list .box_list_flex .c-flex04 .box_inner:nth-of-type(3)::after {
  display: none; }

@media screen and (max-width: 768px) {
  .p-page__flow_list .box_list_flex .c-flex04 {
    display: -ms-grid;
    display: grid;
    -ms-flex-align: center;
    align-items: center;
    gap: 65px;
    width: 100%; } }

.p-page__flow .c-flex04 {
  background-color: #fff;
  padding: 32px;
  position: relative;
  width: 310px;
  max-width: 100%;
  height: 298px;
  border-radius: 8px;
  gap: 53px; }

@media screen and (max-width: 768px) {
  .p-page__flow .c-flex04 {
    height: auto; } }

.p-page__flow .gap-60 {
  gap: 60px; }

.p-page__flow .three-box {
  padding: 32px 32px 48px 32px;
  width: 762px !important;
  gap: 100px; }

@media screen and (max-width: 768px) {
  .p-page__flow .three-box {
    width: 310px !important;
    margin: 0 auto; } }

.p-page__flow .icons-flex {
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
  padding-top: 48px; }

.list_box02 .box_list_colum .c-flex04 {
  height: 475px;
  padding: 32px 35px; }

.list_box02 .box_list_colum .c-flex04 p {
  font-size: 25px;
  text-align: center;
  font-weight: bold; }

@media screen and (max-width: 768px) {
  .list_box02 .box_list_colum .c-flex04 {
    height: auto;
    padding: 30px; } }

.list_box02 .box-big,
.list_box02 .box-normal {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: flex-end;
  text-align: center;
  gap: 0; }

.list_box02 figure {
  margin: 20px 0; }

.p-page__flow_list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: center;
  -ms-flex-align: center;
  align-items: self-start;
  gap: 50px; }

.p-page__flow .c-flex04 p em {
  font-size: 25px;
  text-align: center;
  font-weight: bold;
  display: block;
  color: #333; }

.box_list_colum {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  position: relative; }

.arrow-top {
  position: absolute;
  text-align: center;
  bottom: -140px;
  font-weight: bold;
  font-size: clamp(16px, 5.9vw, 22px);
  width: 115px;
  z-index: 99;
  color: #009ED4;
  left: -50px;
  line-height: 1.4; }

@media screen and (max-width: 768px) {
  .arrow-top {
    bottom: -36px;
    left: -58px; } }

.arrow-top.top_01 {
  top: 30px;
  left: -70px; }

@media screen and (max-width: 768px) {
  .arrow-top.top_01 {
    top: -38px;
    left: -117px; } }

.arrow-top.top_02 {
  left: -60px;
  top: 294px; }

@media screen and (max-width: 768px) {
  .arrow-top.top_02 {
    left: -138px;
    top: 69px; } }

.arrow-top.top_03 {
  bottom: -190px;
  left: -65px; }

@media screen and (max-width: 768px) {
  .arrow-top.top_03 {
    bottom: -38px;
    left: 10px; } }

.arrow-button {
  display: inline-block;
  text-align: center;
  position: absolute;
  background: #009ED4;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  top: 210px;
  left: -6px;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100px;
  height: 60px;
  padding: 17px 0px 17px 9px; }

.arrow-button::before {
  content: "自動連携"; }

.arrow-button::after {
  background-color: #009ED4;
  -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  clip-path: polygon(0 101%, 100% 50%, 0 0);
  content: "";
  height: 60px;
  left: 99%;
  padding: 20px;
  position: absolute;
  top: -0.5%;
  width: 39px; }

@media screen and (max-width: 768px) {
  .arrow-button::after {
    top: 120%;
    right: 40%;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%); } }

.p-page__flow_list > div {
  position: relative; }

.arrow-kind01 {
  top: 142px;
  display: inline-block;
  text-align: center;
  position: absolute;
  background: #009ED4;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 6px 15px 6px;
  margin: 0;
  left: -20px;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100px; }

@media (max-width: 780px) {
  .arrow-kind01 {
    top: 76px !important;
    left: -61px !important; } }

.arrow-kind01:before {
  content: "自動連携" !important; }

@media (max-width: 780px) {
  .arrow-kind01:before {
    font-size: 15px; } }

.arrow-kind02 {
  top: 240px;
  height: 60px;
  left: -23px;
  padding: 17px 0px 17px 9px; }

@media (max-width: 780px) {
  .arrow-kind02 {
    top: 115px !important;
    left: 33px !important;
    background: transparent; } }

.arrow-kind02::before {
  content: unset; }

.arrow-kind02::after {
  background-color: #009ED4;
  -webkit-clip-path: unset;
  clip-path: unset;
  content: "";
  height: 60px;
  left: 99%;
  padding: 20px;
  position: absolute;
  top: 0%;
  width: 40px; }

@media (max-width: 780px) {
  .arrow-kind02::after {
    -webkit-clip-path: unset !important;
    clip-path: unset !important;
    content: "" !important;
    height: 102px !important;
    left: 99% !important;
    padding: 20px !important;
    position: absolute !important;
    top: -68% !important;
    width: 73px !important; } }

.arrow-kind03 {
  top: 400px;
  left: 18px;
  height: 60px;
  padding: 17px 0px 17px 0px; }

@media (max-width: 780px) {
  .arrow-kind03 {
    top: 31px !important;
    left: -76px !important; } }

.arrow-kind03:before {
  content: "自動連携" !important; }

@media (max-width: 780px) {
  .arrow-kind03:before {
    font-size: 15px; } }

.arrow-kind03::after {
  -webkit-clip-path: polygon(95% 0, 100% 103%, 0 50%);
  clip-path: polygon(95% 0, 100% 103%, 0 50%);
  left: -38%;
  top: 0%; }

@media (max-width: 780px) {
  .arrow-kind03::after {
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
    top: -63% !important; } }

.arrow-kind04 {
  top: 240px;
  left: -17px; }

@media (max-width: 780px) {
  .arrow-kind04 {
    top: 70px !important;
    left: 65px !important; } }

.arrow-kind04:before {
  content: "自動連携" !important; }

@media (max-width: 780px) {
  .arrow-kind04:before {
    font-size: 15px; } }

@media (max-width: 780px) {
  .p-page__flow_list {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center; }
  .box_list_colum {
    width: 100%;
    max-width: 400px;
    padding-top: 7rem; }
  .box_list_colum:nth-child(1) {
    padding-top: unset; }
  .arrow-container {
    min-width: auto;
    width: 100%;
    padding: 20px 0; }
  .arrow-button {
    top: 78px;
    left: 0px;
    padding: 16px 10px 15px 9px; }
  /* 下矢印 */
  .arrow-button::after {
    background-color: #009ED4;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
    height: 30px;
    left: 50%;
    top: 99%;
    padding: 20px;
    position: absolute;
    transform: translateX(-50%);
    width: 100px; }
  .c-head-section {
    font-size: 22px; } }

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
  margin-top: 60px; }

.modal-overlay i .modal-header {
  position: relative; }

.modal-overlay .section-heading {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  text-align: center;
  gap: 20px; }

.modal-overlay .section-heading::before, .modal-overlay .section-heading:after {
  content: "";
  -ms-flex: 1;
  flex: 1;
  height: 2px;
  background-color: #009ED4; }

.modal-overlay .section-heading__text {
  font-size: 24px;
  color: #009ED4;
  font-weight: bold; }

@media screen and (max-width: 768px) {
  .modal-overlay .section-heading__text {
    font-size: 18px; } }

.modal-overlay .modal-close {
  position: absolute;
  top: 1%;
  right: 1%;
  width: 40px;
  height: 40px;
  z-index: 1;
  border: none;
  border-radius: 50%;
  font-size: 3rem;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #333;
  transition: all 0.3s; }

.modal-overlay .modal-close:hover {
  background: #e0e0e0;
  color: #333; }

.modal-overlay .modal-content {
  background-color: #fff;
  width: 100%;
  max-width: 1220px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  padding: 50px 68px;
  margin: 20px auto;
  max-height: none;
  overflow-y: visible;
  top: 15%; }

@media screen and (max-width: 768px) {
  .modal-overlay .modal-content {
    width: 90%;
    padding: 40px 20px;
    top: 0%;
    height: auto; } }

.modal-overlay .modal-content .p-reason__detail {
  background-color: #fff;
  padding: unset; }

.modal-overlay .modal-content .back_gray {
  text-align: left;
  width: 37.5%;
  font-size: 19px; }

@media screen and (max-width: 768px) {
  .modal-overlay .modal-content .back_gray {
    width: 100%;
    font-size: 16px; } }

.modal-overlay .modal-content .step_box_title {
  padding-bottom: 10px;
  font-weight: bold; }

.modal-overlay .modal-content_data {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  padding-top: 40px; }

@media screen and (max-width: 768px) {
  .modal-overlay .modal-content_data {
    padding-top: 30px; } }

.modal-overlay .modal-content .holder-main {
  font-size: 16px;
  padding: 20px 24px;
  height: 108px;
  font-weight: normal;
  letter-spacing: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  width: 864px;
  line-height: 180%; }

@media screen and (max-width: 768px) {
  .modal-overlay .modal-content .holder-main {
    font-size: 14px;
    height: auto;
    width: 100%;
    padding: 20px 20px;
    line-height: 1.5; } }

.modal-overlay .modal-content .title-holder-head {
  margin: unset;
  display: -ms-flexbox;
  display: flex;
  background: #F5FCFE;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 1084px;
  -ms-flex-align: center;
  align-items: center; }

@media screen and (max-width: 768px) {
  .modal-overlay .modal-content .title-holder-head {
    display: block; } }

.modal-overlay .modal-content .trouble-number {
  background: #009ED4;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 108px;
  width: 220px;
  line-height: 150%; }

@media screen and (max-width: 768px) {
  .modal-overlay .modal-content .trouble-number {
    font-size: 16px;
    height: 45px;
    width: 100%; } }

.modal-overlay.active {
  display: block; }

@media screen and (max-width: 768px) {
  .p-page__cta .c-button.orange {
    padding: 18px 20px !important; } }

.p-page__cta--btn {
  position: absolute;
  top: 80%;
  width: 42%;
  left: 30%; }

@media screen and (max-width: 768px) {
  .p-page__cta--btn {
    position: absolute;
    top: 90%;
    width: auto;
    left: 5%; } }

@media screen and (max-width: 768px) {
  .p-page__cta--btn .balloon {
    padding: 8px 20px;
    top: 13px; } }

@media screen and (max-width: 768px) {
  .p-page__cta--btn .balloon span {
    font-size: 12px; } }

@media screen and (max-width: 768px) {
  .p-page__cta--btn .balloon strong {
    font-size: 12px; } }

.p-page__cta--btn .c-button {
  margin: 0 auto;
  padding: 36px 0;
  width: 100%;
  max-width: 100%;
  font-size: 28px;
  line-height: 1;
  z-index: 1;
  transition: all .3s; }

@media screen and (max-width: 768px) {
  .p-page__cta--btn .c-button {
    padding: 18px 20px !important;
    width: 420px; } }

.p-page__cta--title {
  text-align: center;
  font-size: 36px;
  padding-top: 15px;
  padding-right: 50px; }

@media screen and (max-width: 768px) {
  .p-page__cta--title {
    font-size: 22px;
    padding-bottom: 25px;
    padding-right: 0px; } }

.p-page__cta--title em {
  font-size: 48px; }

@media screen and (max-width: 768px) {
  .p-page__cta--title em {
    font-size: 32px; } }

.p-cta {
  padding: 100px 20px;
  background: #009ed4 url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/hotei/index_renew/cta-bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  position: relative; }

.p-cta .c-check-mark {
  padding: 10px 0px 8px 30px; }

.p-cta .balloon::before {
  display: none; }

.p-cta .inner {
  padding: 90px 10px 90px 65px;
  max-width: 1220px;
  margin: 0 auto;
  background-color: #fff;
  position: relative; }

@media screen and (max-width: 768px) {
  .p-cta .inner {
    padding: 30px 20px; } }

.p-cta .mini-logo {
  width: 25%;
  position: absolute;
  top: 3%;
  left: 1%; }

.p-cta .ttl {
  font-size: 2.25rem;
  font-weight: bold;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center; }

.p-cta .p-toc__point {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding-bottom: 47px; }

@media screen and (max-width: 768px) {
  .p-cta .p-toc__point {
    display: block !important; } }

.p-cta .p-toc__point .c-check-mark {
  padding: 10px 0px 8px 30px; }

@media screen and (max-width: 768px) {
  .p-cta .p-toc__point .c-check-mark {
    padding: 10px 0px 8px 50px; } }

.p-cta .p-toc__point .c-check-mark::before {
  width: 1.5em;
  height: 1.5em;
  border-radius: 100vh;
  top: 30%;
  left: -1em; }

@media screen and (max-width: 768px) {
  .p-cta .p-toc__point .c-check-mark::before {
    top: 30%;
    left: 0em; } }

.p-cta .p-toc__point .c-check-mark::after {
  width: .75em;
  height: .5em;
  border: 3px solid;
  border-top: none;
  border-right: none;
  border-radius: 3px;
  left: -0.6em;
  top: 47%;
  transform: rotate(-45deg);
  margin: auto;
  border-color: #fff; }

@media screen and (max-width: 768px) {
  .p-cta .p-toc__point .c-check-mark::after {
    left: 0.4em;
    top: 40%; } }

.p-cta .p-toc__point .c-marker {
  font-size: 42px; }

@media screen and (max-width: 768px) {
  .p-cta .p-toc__point .c-marker {
    font-size: 21px; } }

.p-cta .p-toc__point .c-marker::after {
  background: #FEC108;
  height: 15px; }

.p-cta .p-toc__point li {
  font-size: 27px; }

@media screen and (max-width: 768px) {
  .p-cta .p-toc__point li {
    font-size: 18px; } }

.p-cta .c-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #fff;
  padding: 28px;
  border-radius: 100px;
  background-color: #FF9A00;
  transition: all .3s;
  text-align: center;
  max-width: 420px;
  width: 100%; }

.p-cta .p-toc__point {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }

.p-fee--product__price {
  text-align: center; }

@media screen and (max-width: 768px) {
  .p-fee--product__price {
    margin-right: 0px !important; } }

.p-fee--product {
  padding: 49px 145px 46px;
  -ms-flex-pack: center;
  justify-content: center; }

@media screen and (max-width: 768px) {
  .p-fee--product {
    padding: 40px 20px; } }

.p-fee--product .warnning {
  padding-top: 15px;
  text-align: center; }

.p-fee--product .p-fee--product__price > figure {
  max-width: unset;
  margin: 0 auto 20px !important; }

.p-fee--product .c-button::after {
  right: 26px; }

.p-fee--product__price {
  margin-right: 65px; }

.p-fee--product {
  font-family: sans-serif; }

.p-fee--product .p-fee--product__price > figure {
  margin: unset !important; }

@media screen and (max-width: 768px) {
  .p-fee--product .p-fee--product__price p {
    line-height: 1.7;
    padding-bottom: 10px; } }

.p-fee--product .p-fee--product__price em {
  font-weight: bold !important; }

.p-fee--product em {
  font-weight: bold; }

.price .logo {
  height: 200px; }

@media screen and (max-width: 768px) {
  .price .logo {
    height: auto; } }

.p-fee--product__price {
  font-size: 22px; }

.p-fee--product__price strong {
  letter-spacing: .02em;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  font-weight: 700 !important; }

@media screen and (max-width: 768px) {
  .p-fee--product__price strong {
    font-size: 36px; } }

.p-fee-colum .c-button-wrap {
  margin: unset !important; }

.p-fee-colum .c-fukidashi {
  transform: translate(-50%, -2rem);
  width: 381px; }

@media screen and (max-width: 768px) {
  .p-fee-colum .c-fukidashi {
    width: 310px; } }

.p-fee-colum .c-fukidashi::before {
  border-style: solid;
  border-width: 20px 16px 0;
  bottom: 0;
  content: "";
  left: 50%;
  position: absolute;
  translate: -50% 100%; }

.p-fee-colum .c-flex02 {
  position: relative; }

.p-fee-colum .c-lead.u-align--center {
  background: #fff;
  color: #000;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  -webkit-clip-path: polygon(0 50%, 22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%);
  clip-path: polygon(0 50%, 22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%);
  font-size: 20px; }

.p-fee-colum .c-lead.u-align--center:before {
  display: none; }

.p-fee-colum .c-lead.u-align--center::after {
  display: none; }

.p-fee-colum .logo img {
  margin: auto;
  max-height: 70px; }