@charset "UTF-8";
body.over-hidden {
  width: 100%;
  height: 100vh;
  overflow: hidden; }

/*--------------------
 bg_page
---------------------*/
#bg_page {
  background-color: #009DDC;
  opacity: 0.4;
  mix-blend-mode: multiply;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: background-color 1s; }

#bg_page.out {
  background-color: transparent; }

/*--------------------
　row_service
---------------------*/
.row_service {
  gap: calc(60/1920*100vw) 5%;
  flex-wrap: wrap; }
  @media (max-width: 1280px) {
    .row_service {
      gap: calc(60/1024*100vw) 4%; } }
  @media (max-width: 1024px) {
    .row_service {
      gap: calc(40/768*100vw) 4%; } }
  .row_service .col {
    width: calc(100%/3 - 10%/3); }
    @media (max-width: 1280px) {
      .row_service .col {
        width: calc(100%/3 - 8%/3); } }
    @media (max-width: 1024px) {
      .row_service .col {
        width: calc(50% - 4%/2); } }
    @media (max-width: 500px) {
      .row_service .col {
        width: 100%; } }
    .row_service .col figure {
      border-radius: var(--size20);
      overflow: hidden; }
    .row_service .col h4 {
      font-weight: 700;
      margin: 0.5em auto; }
      .row_service .col h4::before {
        display: none; }

.wrapper_personal .row_service h4 {
  color: #F7AC1E; }

.wrapper_business .row_service h4 {
  color: #0A8730; }

/*--------------------
　flow
---------------------*/
.flow {
  background-color: rgba(229, 248, 255, 0.9); }

.row_flow {
  gap: var(--size10);
  flex-flow: wrap;
  padding-top: var(--size60); }
  @media (max-width: 1024px) {
    .row_flow {
      gap: var(--size100) var(--size20); } }
  .row_flow .col.box_flow {
    position: relative;
    width: calc(25% - var(--size30)/4); }
    @media (max-width: 1024px) {
      .row_flow .col.box_flow {
        width: calc(50% - var(--size20)/2); } }
    @media (max-width: 500px) {
      .row_flow .col.box_flow {
        width: 100%; } }
    .row_flow .col.box_flow .icn {
      width: var(--size100);
      position: absolute;
      left: calc(50% - var(--size50));
      top: calc(-1*var(--size50));
      z-index: 2; }
    .row_flow .col.box_flow figure {
      border-radius: var(--size20);
      margin-bottom: var(--size20); }
    .row_flow .col.box_flow h5 {
      border-bottom: 1px solid #0A2C87;
      padding-bottom: 0.5em;
      margin-bottom: 1em;
      padding: 0 0.5em 0.5em;
      color: #0A2C87; }
    .row_flow .col.box_flow p {
      padding: 0 0.5em; }