/* noto-serif-jp-500 - latin */
@font-face {
  font-family: "Noto Serif JP";
  font-style: Medium;
  font-weight: 500;
  src: url("../font/noto-serif-jp-medium.woff") format("woff"), url("../font/noto-serif-jp-medium.woff2") format("woff2"), url("../font/noto-serif-jp-medium.ttf") format("truetype"); /* Safari, Android, iOS */
}
/* noto-sans-jp-500 - latin */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: normal;
  src: url("../font/noto-sans-jp-v28-latin_japanese-500.woff2") format("woff2"), url("../font/noto-sans-jp-v28-latin_japanese-500.woff") format("woff"), url("../font/noto-sans-jp-v28-latin_japanese-500.ttf") format("truetype"), url("../font/noto-sans-jp-v28-latin_japanese-500.svg#NotoSansJP") format("svg"); /* Legacy iOS */
}
/* noto-sans-jp-700 - latin */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: bold;
  src: url("../font/noto-sans-jp-v28-latin_japanese-700.woff2") format("woff2"), url("../font/noto-sans-jp-v28-latin_japanese-700.woff") format("woff"), url("../font/noto-sans-jp-v28-latin_japanese-700.ttf") format("truetype"), url("../font/noto-sans-jp-v28-latin_japanese-700.svg#NotoSansJP") format("svg"); /* Legacy iOS */
}
/* noto-sans-jp-900 - latin */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("../font/noto-sans-jp-v36-latin_japanese-900.woff2") format("woff2"), url("../font/noto-sans-jp-v36-latin_japanese-900.woff") format("woff"), url("../font/noto-sans-jp-v36-latin_japanese-900.ttf") format("truetype"), url("../font/noto-sans-jp-v36-latin_japanese-900.svg#NotoSansJP") format("svg"); /* Legacy iOS */
}
.un_flow_list {
  list-style-type: none;
  counter-reset: count 0;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.05em;
}
.un_flow_item:nth-of-type(odd) {
  background-color: RGB(31, 65, 115);
  color: #fff;
}
.un_flow_item:nth-of-type(even) {
  background-color: #fbf7d7;
}
.un_flow_item:nth-of-type(even) .un_flow_ttl {
  color: #2e416d;
}
.un_flow_wrap {
  position: relative;
}
.un_flow_arrow {
  display: block;
  position: absolute;
  top: 5%;
  left: 10px;
  background-color: #fff;
  width: 45px;
  height: calc(90% - 36px);
}
.un_flow_arrow::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 36px #fff solid;
  border-left: 36px transparent solid;
  border-right: 36px transparent solid;
}
.un_flow_item:nth-of-type(even) .un_flow_arrow {
  background-color: #2e416d;
}
.un_flow_item:nth-of-type(even) .un_flow_arrow::after {
  border-top: 36px #2e416d solid;
}
.un_flow_cont {
  display: flex;
  padding: 45px 0 45px 80px;
}
.un_flow_contInner {
  flex: 1;
  padding-right: 30px;
}
.un_flow_ttl {
  font-size: 3.2rem;
  margin-bottom: 15px;
}
.un_flow_txt {
  line-height: 2.1;
}
.un_flow_img {
  max-width: 440px;
  width: 45%;
}
@media screen and (max-width: 1210px) {
  .un_flow_arrow {
    left: 20px;
  }
}
@media screen and (max-width: 767px) {
  .un_flow_list {
    margin-bottom: 35px;
  }
  .un_flow_item:nth-of-type(odd) {
    background-color: #fff;
    color: #000;
  }
  .un_flow_cont {
    display: block;
  }
  .un_flow_arrow {
    width: 0;
    height: 0;
    top: auto;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
  }
  .un_flow_arrow::after {
    bottom: 0;
    border-top: 30px #2e416d solid;
    border-left: 40px transparent solid;
    border-right: 40px transparent solid;
  }
  .un_flow_item:nth-of-type(even) .un_flow_arrow::after {
    border-top: 30px #2e416d solid;
  }
  .un_flow_wrap {
    padding-top: 30px;
    padding-bottom: 90px;
  }
  .un_flow_cont {
    padding: 0;
  }
  .un_flow_ttl {
    text-align: center;
    color: #2e416d;
    font-size: 2.4rem;
  }
  .un_flow_txt {
    line-height: 2;
  }
  .un_flow_contInner {
    padding-right: 0;
    margin-bottom: 20px;
  }
}