@charset "UTF-8";
/*
編集はscssで行うこと
*/
.lead {
  margin-top: 20px;
  margin-bottom: 60px;
  text-align: justify;
  word-break: break-all; }
  @media screen and (min-width: 768px) {
    .lead {
      font-size: 18px; } }
  .lead h2 {
    margin-top: 1em;
    font-size: 1.6em; }
  .lead a {
    text-decoration: underline; }
    .lead a:hover {
      text-decoration: none; }
  .lead p {
    margin-bottom: 1em; }
  .lead .list-box {
    font-size: 0.9em; }

.chapters {
  margin: 50px 0; }
  .chapters a.chapter {
    pointer-events: none; }
    .chapters a.chapter h2 {
      display: inline-block;
      pointer-events: auto; }
      @media screen and (min-width: 768px) {
        .chapters a.chapter h2 {
          line-height: 0.9;
          border-bottom: solid 1px rgba(0, 0, 0, 0);
          transition: 0.4s; } }
    @media screen and (min-width: 768px) {
      .chapters a.chapter:hover h2 {
        border-bottom-color: #303030;
        transition: 0.4s; } }
    .chapters a.chapter .thumb img {
      pointer-events: auto;
      transition: 0.4s; }
    .chapters a.chapter:hover .thumb img {
      opacity: 0.6;
      transition: 0.4s; }
    .chapters a.chapter .detail-link {
      display: inline-block;
      pointer-events: auto; }
      @media screen and (min-width: 768px) {
        .chapters a.chapter .detail-link {
          line-height: 0.9;
          border-bottom: solid 1px rgba(0, 0, 0, 0);
          transition: 0.4s; } }
      .chapters a.chapter .detail-link::after {
        display: inline-block;
        content: "\f105";
        font-family: FontAwesome;
        margin-left: .4em; }
    @media screen and (min-width: 768px) {
      .chapters a.chapter:hover .detail-link {
        border-bottom-color: #303030;
        transition: 0.4s; } }
  .chapters .chapter h2 {
    margin: 0 0 5px; }
  .chapters .chapter p {
    font-size: 17px; }
  .chapters .chapter.comingsoon {
    opacity: 0.3; }

main .grid a {
  text-decoration: none; }
main .grid a .list-inline-img img {
  margin-bottom: 5px;
  pointer-events: auto;
  transition: 0.3s; }
main .grid a:hover .list-inline-img img {
  opacity: 0.7;
  transition: 0.3s; }
main .grid .ngc {
  margin-bottom: 30px;
  pointer-events: none; }
  @media screen and (min-width: 768px) {
    main .grid .ngc {
      font-size: 20px; } }
main .grid .links {
  pointer-events: auto; }
main .grid a:hover .links {
  text-decoration: underline; }
main .grid .links li::after {
  display: inline-block;
  content: "\f105";
  font-family: FontAwesome;
  margin-left: .3em; }
main .grid a[target="_blank"] .links li::after {
  content: "\f08e"; }

main .row .col-xs-12 {
  margin-bottom: 30px; }

.page-heading {
  background-color: #111; }
  .page-heading h1 {
    margin: 0;
    padding: 18px 10px 15px;
    color: #fff;
    font-size: 20px; }
  @media screen and (min-width: 768px) {
    .page-heading {
      display: flex;
      flex-direction: row-reverse;
      align-items: center; }
      .page-heading > * {
        width: 50%; }
      .page-heading h1 {
        padding-left: 1em;
        font-size: 28px; } }

.indices {
  margin: 0 0 50px; }

.index {
  margin: 0 0 20px;
  padding: 10px 15px;
  background-color: #eee; }
  @media screen and (min-width: 768px) {
    .index {
      padding-left: 25px;
      padding-right: 25px; } }
  .index .step {
    margin-bottom: 0;
    padding: 0.7em 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5; }
    @media screen and (min-width: 768px) {
      .index .step {
        padding: 0.5em 0.9em;
        font-size: 18px; } }
  .index ul {
    padding: 0; }
  .index li {
    list-style: none;
    padding: 0.7em 0;
    font-size: 15px; }
    @media screen and (min-width: 768px) {
      .index li {
        padding: 0.5em 1em;
        font-size: 17px; } }
    .index li span:first-of-type {
      display: inline-block;
      min-width: 4em; }
      @media screen and (min-width: 768px) {
        .index li span:first-of-type {
          min-width: 4.5em; } }
    .index li ul {
      padding: 0.5em 0.5em 0.5em 1.5em; }
      @media screen and (min-width: 768px) {
        .index li ul {
          padding: 0.5em 0.5em 0.5em 3.5em; } }
    .index li li span:first-of-type {
      min-width: 0;
      margin-right: 0.5em; }
  .index a::after {
    display: inline-block;
    content: "\f105";
    font-family: FontAwesome;
    margin-left: .6em; }

#in_page_links .index,
.indices.contents-page .index {
  padding: 5px 15px; }

.indices.contents-page h1 {
  font-size: 24px; }

#in_page_links li,
.indices.contents-page li {
  padding-top: 0.5em;
  padding-bottom: 0.5em; }
  @media screen and (min-width: 768px) {
    #in_page_links li,
    .indices.contents-page li {
      padding-top: 0.25em;
      padding-bottom: 0.25em; } }

#dmenupa {
  z-index: 99999;
  width: 100%;
  max-width: 1200px; }
  #dmenupa.fixedmenu {
    position: fixed; }
  #dmenupa > div {
    display: none; }
  #dmenupa.fixedmenu_inpage #in_page_links {
    display: block; }
  @media screen and (max-width: 767px) {
    #dmenupa > div:first-child {
      display: block;
      background-color: #686868;
      text-align: right; }
    #dmenupa #dmenupa-btn {
      display: inline-block;
      padding: 5px 12px 7px 15px;
      background-color: #383838;
      color: #eee;
      cursor: pointer; }
      #dmenupa #dmenupa-btn::after {
        position: relative;
        top: 2px;
        padding-left: 10px;
        content: "\f107";
        font-family: FontAwesome;
        font-size: 1.3em; } }
  #dmenupa ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    #dmenupa ul ul {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 9999;
      visibility: hidden;
      opacity: 0;
      min-width: 100%; }
      #dmenupa ul ul li {
        min-width: 100%;
        background-color: #ccc; }
      #dmenupa ul ul ul {
        z-index: 9999;
        top: 0;
        left: 100%; }
  @media screen and (min-width: 768px) {
    #dmenupa #in_page_links ul {
      padding: 10px 0; } }
  #dmenupa > ul {
    background-color: #686868;
    list-style: none; }
    @media screen and (min-width: 768px) {
      #dmenupa > ul {
        display: flex;
        flex-wrap: wrap; } }
    @media screen and (max-width: 767px) {
      #dmenupa > ul {
        display: none; } }
  #dmenupa li {
    position: relative;
    white-space: nowrap; }
    #dmenupa li > ul {
      transition: 0.5s; }
    @media screen and (min-width: 768px) {
      #dmenupa li:hover > ul {
        visibility: visible;
        opacity: 1;
        transition: 0.5s; } }
    #dmenupa li a {
      display: block;
      padding: 10px 12px;
      padding-right: 24px;
      color: #fff; }
      #dmenupa li a:hover {
        text-decoration: none; }
    #dmenupa li > span {
      display: block;
      padding: 10px 12px;
      padding-right: 24px;
      color: #fff; }
    #dmenupa li li li a {
      background-color: #383838; }
      #dmenupa li li li a:hover {
        background-color: #202020; }
    #dmenupa li::after {
      position: absolute;
      top: 47%;
      right: 6px;
      content: "\f105";
      font-family: FontAwesome;
      font-size: 1.3em;
      color: #ddd;
      transform: translateY(-50%);
      pointer-events: none; }
  #dmenupa > ul > li {
    position: relative;
    background-color: #686868; }
    #dmenupa > ul > li:hover {
      background-color: #505050; }
    #dmenupa > ul > li:first-child a {
      padding-right: 12px;
      padding-bottom: 5px;
      border-bottom: solid 5px #c00;
      background-color: #000;
      font-weight: bold; }
      #dmenupa > ul > li:first-child a:hover {
        background-color: #333; }
      @media screen and (max-width: 990px) {
        #dmenupa > ul > li:first-child a::after {
          content: "\f053";
          font-family: FontAwesome;
          font-weight: normal; }
        #dmenupa > ul > li:first-child a span {
          display: none; } }
    #dmenupa > ul > li::after {
      content: "\f107"; }
    #dmenupa > ul > li:first-child::after {
      content: none; }
    #dmenupa > ul > li > ul > li {
      position: relative;
      background-color: #505050; }
    #dmenupa > ul > li > ul > li:hover {
      background-color: #383838; }

#in_page_links .index {
  margin: 0;
  padding: 0;
  background: none; }
#in_page_links .heading {
  padding: 3px 15px 5px;
  background-color: #ddd;
  font-size: 18px;
  font-weight: bold; }
  #in_page_links .heading::after {
    position: relative;
    top: 1px;
    left: 8px;
    content: "\f107";
    font-family: FontAwesome;
    font-size: 1.3em;
    opacity: 0.8; }
  @media screen and (max-width: 767px) {
    #in_page_links .heading {
      cursor: pointer; } }
  #in_page_links .heading + .step {
    background-color: #ddd; }
#in_page_links ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 10px 15px;
  background: #eee; }
  @media screen and (max-width: 767px) {
    #in_page_links ul {
      display: none;
      overflow: hidden; } }
@media screen and (min-width: 768px) {
  #in_page_links .index ul {
    visibility: hidden;
    opacity: 0;
    transition: 0.5s; }
  #in_page_links .index:hover ul {
    visibility: visible;
    opacity: 1;
    transition: 0.5s; } }
#in_page_links li::after {
  content: ""; }
#in_page_links li a {
  display: inline-block;
  padding: 0;
  color: #445166; }
  #in_page_links li a:hover {
    color: #252d38;
    text-decoration: underline; }
@media screen and (max-width: 767px) {
  #in_page_links li {
    font-size: 15px; }
    #in_page_links li a {
      display: block; } }

.contents {
  margin-bottom: 100px; }
  .contents article {
    margin: -120px 0 60px;
    padding-top: 100px; }
    @media screen and (min-width: 768px) {
      .contents article {
        padding-top: 140px; } }
    .contents article h2 {
      margin-top: 0; }
      .contents article h2 span {
        color: #b00; }
    .contents article h3.attention {
      display: table;
      padding: 7px 20px 4px;
      color: #fff;
      background-color: #c00;
      border-radius: 40px; }
    .contents article p + h3 {
      margin-top: 2em; }
    .contents article > h4 {
      margin-top: 1.7em;
      font-size: 1.05em; }
    .contents article a {
      text-decoration: underline; }
      .contents article a:hover {
        text-decoration: none; }
      .contents article a[target="_blank"]::after {
        display: inline-block;
        content: "\f08e";
        font-family: FontAwesome;
        margin: .5em; }
    .contents article p {
      margin-bottom: 1em;
      text-align: justify; }
      .contents article p.text-center {
        text-align: center; }
    .contents article p a {
      margin-left: 0.5em; }
    .contents article .center-block + p {
      margin-top: 1em; }
    .contents article .note-mark {
      display: inline-block;
      vertical-align: super;
      margin: 0 0.3em;
      font-size: 0.8em;
      font-weight: bold; }
    .contents article p + .note {
      margin-top: -0.7em;
      margin-bottom: 1.5em;
      font-size: 0.9em; }
    .contents article .note + .note {
      margin-top: -7px; }
    .contents article figure {
      margin-top: 1em; }
    .contents article figcaption {
      margin-top: 3px;
      text-align: center; }
      .contents article figcaption strong {
        font-size: 1.1em; }
    .contents article .detail {
      margin: 40px 0 50px; }
      .contents article .detail h3 {
        clear: both;
        border-bottom: solid 1px #555;
        margin-top: 30px;
        margin-bottom: 10px;
        padding-bottom: 5px;
        text-align: center; }
      .contents article .detail figure {
        margin-top: 0; }
    .contents article .firmware-table {
      max-width: 600px;
      margin: 20px auto; }
      .contents article .firmware-table.compare-table tr:nth-child(2) {
        background-color: #AAC6E5; }
      .contents article .firmware-table .table {
        margin: 0 0 5px; }
        .contents article .firmware-table .table tr > * {
          vertical-align: middle; }
        .contents article .firmware-table .table tr > *:nth-child(n+2) {
          text-align: center; }
      .contents article .firmware-table .note {
        margin: 0;
        font-size: 0.95em;
        text-align: right; }
    .contents article .tips {
      position: relative;
      margin-top: 2em;
      padding: 20px 15px 1px;
      border: solid 8px #999; }
      .contents article .tips h3 {
        position: absolute;
        top: -15px;
        left: -15px;
        margin: 0;
        padding: 5px 10px 2px 1.5em;
        background-color: #000;
        color: #fff;
        letter-spacing: 1em; }
      .contents article .tips h4 {
        font-size: 1.3em; }
      .contents article .tips .col-xs-12 {
        margin-bottom: 10px; }
        @media screen and (min-width: 768px) {
          .contents article .tips .col-xs-12 {
            margin-bottom: 0; } }
    .contents article .icons {
      list-style: none;
      display: flex;
      justify-content: center;
      padding: 0; }
      .contents article .icons li {
        margin: 5px;
        padding: 10px 20px;
        color: #fff;
        background-color: #5492C4;
        font-weight: bold;
        border-radius: 10px; }
  .contents #content3_1_11 .table {
    max-width: 600px;
    margin: 20px auto; }
    .contents #content3_1_11 .table tr > * {
      width: 50%;
      text-align: center;
      vertical-align: middle; }
  .contents #content3_1_24 .table tr > * {
    text-align: center;
    vertical-align: middle; }

.image-right {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 768px) {
    .image-right {
      clear: both;
      float: right;
      max-width: 33%;
      margin-left: 15px;
      margin-right: 0;
      margin-top: -10px; } }

.image-box {
  margin-bottom: 20px; }
  .image-box img {
    margin-left: auto;
    margin-right: auto; }
  @media screen and (min-width: 768px) {
    .image-box {
      display: flex;
      justify-content: center;
      align-items: center; }
      .image-box img {
        margin: 0; }
        .image-box img.rotate90 {
          transform: rotate(-90deg); } }

img.frame {
  border: solid 1px #777; }

.flex-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0; }
  .flex-box li {
    list-style: none; }
  .flex-box.interoperability {
    max-width: 900px;
    margin: 0 auto; }
    .flex-box.interoperability > div {
      padding: 0 0 10px; }
      @media screen and (min-width: 768px) {
        .flex-box.interoperability > div {
          width: 50%;
          padding: 10px; } }

.dante-module li {
  width: 24%;
  margin: 0.5%;
  padding: 10px;
  background-color: #ddd;
  text-align: center; }
  @media screen and (max-width: 1100px) {
    .dante-module li {
      width: 32%; } }
  @media screen and (max-width: 830px) {
    .dante-module li {
      width: 49%; } }

.dante-software {
  color: #777;
  font-size: 1.2em;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .dante-software {
      font-size: 1.4em; } }
  .dante-software li {
    width: 100%;
    margin: 0 0 10px;
    padding: 10px;
    background-color: #eee; }
    @media screen and (min-width: 768px) {
      .dante-software li {
        width: 49%;
        margin: 0.5%; } }
  .dante-software img {
    margin: -4px auto 0; }
    @media screen and (min-width: 768px) {
      .dante-software img {
        margin: -8px auto 0; } }

.certification-program img {
  max-width: 80%;
  margin: 0 auto; }

.major-standards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .major-standards h3 {
    width: 100%;
    margin-bottom: 1em;
    text-align: center; }
  .major-standards ul {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 10px; }
  .major-standards li {
    list-style: none;
    width: 135px;
    height: 85px;
    margin: 10px 10px -40px;
    padding: 0.6em 0 0;
    background: no-repeat;
    background-size: contain;
    color: #fff;
    font-size: 1em;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .major-standards li {
        width: 160px;
        height: 95px;
        padding-top: 0.65em;
        font-size: 1.2em; } }
  .major-standards .aoip {
    border: dotted 4px #e00;
    border-radius: 20px; }
    @media screen and (min-width: 768px) {
      .major-standards .aoip {
        width: 390px; } }
    @media screen and (max-width: 1050px) {
      .major-standards .aoip {
        width: 580px; } }
    .major-standards .aoip .heading {
      padding-top: 0;
      padding-left: 0.3em;
      background: none;
      color: #f00;
      font-weight: bold;
      font-size: 2em;
      text-align: left; }
      @media screen and (min-width: 768px) {
        .major-standards .aoip .heading {
          padding-top: 0.1em; } }
  .major-standards .other {
    border: solid 4px #fff; }
    @media screen and (min-width: 694px) {
      .major-standards .other {
        width: 580px; } }

.boxes {
  display: flex;
  flex-wrap: wrap; }
  .boxes.no-flex {
    display: block; }
    @media screen and (min-width: 1160px) {
      .boxes.no-flex > div {
        width: auto;
        margin: 20px auto; } }
    @media screen and (min-width: 768px) {
      .boxes.no-flex > div div {
        display: block; } }
  .boxes > div {
    margin: 20px 0;
    border: solid 1px #777; }
    @media screen and (min-width: 1160px) {
      .boxes > div {
        width: 48%;
        margin: 20px 1%; } }
    @media screen and (min-width: 768px) {
      .boxes > div div {
        display: flex;
        align-items: flex-start; } }
    .boxes > div h3 {
      margin: 0;
      padding: 10px 20px 8px;
      background: #777;
      color: #fff; }
    .boxes > div p {
      margin: 0;
      padding: 10px 15px;
      text-align: justify; }
      .boxes > div p.note {
        margin-top: -12px;
        font-size: 0.95em; }
    .boxes > div img {
      max-width: 240px;
      margin: 0 auto 15px; }
      @media screen and (min-width: 768px) {
        .boxes > div img {
          margin: 12px 15px 12px 5px; } }

.list-box {
  margin: 20px 0;
  padding: 17px 10px 12px 30px;
  background-color: #eee;
  border-radius: 20px; }
  @media screen and (min-width: 768px) {
    .list-box {
      padding-left: 60px; } }
  .list-box.important {
    padding-left: 10px;
    background-color: #999;
    border: solid 8px #ddd;
    border-radius: 0; }
    @media screen and (min-width: 768px) {
      .list-box.important {
        padding: 10px 20px 20px; } }
    .list-box.important h3 {
      padding: 6px 8px 3px;
      background-color: #fff;
      color: #666; }
    .list-box.important li {
      color: #fff; }
      .list-box.important li strong {
        display: inline-block;
        padding: 2px 5px 0;
        background-color: #fff;
        color: #c00; }
    .list-box.important .note {
      padding-left: 1.5em;
      color: #fff; }
  @media screen and (min-width: 768px) {
    .list-box.count {
      padding: 20px 20px 10px; } }
  .list-box.count ol {
    counter-reset: my-counter;
    list-style: none; }
    @media screen and (max-width: 767px) {
      .list-box.count ol {
        padding: 0; } }
  .list-box.count li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    line-height: 1.5; }
    .list-box.count li:before {
      content: counter(my-counter);
      counter-increment: my-counter;
      padding: 4px 0 0;
      background-color: #fff;
      border-radius: 50%;
      box-sizing: border-box;
      text-align: center;
      height: 22px;
      width: 22px;
      color: #888;
      line-height: 1;
      position: absolute;
      top: 7px;
      left: 0; }
  .list-box li {
    padding: 7px 0;
    color: #555;
    font-size: 1.05em;
    font-weight: bold; }
  .list-box a {
    color: #fff; }
    .list-box a:hover {
      color: #ddd; }

.flow-box {
  max-width: 900px;
  margin: 0 auto; }
  .flow-box ol {
    counter-reset: my-counter;
    list-style: none;
    margin-top: 25px;
    padding: 0;
    font-weight: bold; }
  .flow-box li {
    position: relative;
    margin-bottom: 30px;
    padding: 10px 10px 10px 30px;
    border: solid 5px #6ba7d3;
    border-radius: 10px; }
    .flow-box li:before {
      position: relative;
      top: 3px;
      left: -10px;
      content: counter(my-counter) ".";
      counter-increment: my-counter;
      color: #888;
      font-size: 1.5em;
      line-height: 1; }
    .flow-box li:nth-child(2) {
      background-color: #deebf6; }
    .flow-box li:nth-child(3) {
      background-color: #bdd7ee; }
    .flow-box li:nth-child(1):after, .flow-box li:nth-child(2):after {
      content: "";
      display: block;
      position: absolute;
      bottom: -35px;
      left: 50%;
      height: 0;
      width: 30px;
      border-left: solid 30px transparent;
      border-top: solid 30px #999;
      border-right: solid 30px transparent;
      transform: translateX(-50%); }

.check-list {
  margin: 1.5em 0;
  padding: 0;
  list-style: none; }
  .check-list li {
    font-size: 1.1em;
    font-weight: bold; }
    .check-list li.strong {
      color: #c00; }
    .check-list li::before {
      position: relative;
      top: 2px;
      display: inline-block;
      content: "\f14a";
      font-family: FontAwesome;
      font-size: 1.2em;
      font-weight: normal;
      line-height: 1em;
      margin: .5em; }

.check-list-box-container .check-list-box {
  max-width: 800px;
  margin: 15px auto;
  color: #555;
  box-shadow: 2px 2px 5px #ccc;
  background-color: #D1DFEC;
  border: solid 3px #eff6f6; }
  .check-list-box-container .check-list-box:nth-child(2) {
    background-color: #F5ECCE;
    border-color: #F9F8E0; }
  .check-list-box-container .check-list-box:nth-child(3) {
    background-color: #CEE8BD;
    border-color: #E5F3D9; }
  @media screen and (min-width: 768px) {
    .check-list-box-container .check-list-box {
      display: flex;
      align-items: center; } }
  .check-list-box-container .check-list-box h3 {
    margin: 0;
    padding: 25px 8px 5px; }
    @media screen and (min-width: 768px) {
      .check-list-box-container .check-list-box h3 {
        width: 55%;
        margin: 0;
        padding: 10px; } }
  .check-list-box-container .check-list-box ul {
    list-style: none;
    margin: 0;
    padding: 10px 0; }
    @media screen and (min-width: 768px) {
      .check-list-box-container .check-list-box ul {
        width: 45%; } }
    .check-list-box-container .check-list-box ul li::before {
      position: relative;
      top: 2px;
      display: inline-block;
      content: "\f00c";
      font-family: FontAwesome;
      font-size: 1.2em;
      font-weight: normal;
      line-height: 1em;
      margin: .5em; }

.steps {
  padding-bottom: 4em; }
  .steps .anchor {
    display: block;
    height: 0;
    margin-top: -100px;
    padding-top: 100px; }
  .steps .step {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    border: solid 5px #6ba7d3;
    border-radius: 10px; }
    .steps .step > * {
      width: 100%; }
    @media screen and (min-width: 992px) {
      .steps .step {
        flex-direction: row;
        align-items: center; }
        .steps .step > * {
          width: 50%; } }
    .steps .step > p {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0 10px; }
      .steps .step > p span:first-child {
        font-size: 2.4em;
        padding-right: 0.5em;
        color: #777; }
      .steps .step > p span:last-child {
        font-size: 1.2em;
        font-weight: bold;
        line-height: 1.1; }
    .steps .step > ul {
      margin: 0;
      padding: 5px 20px;
      background-color: #6ba7d3; }
      .steps .step > ul li {
        list-style: none;
        margin: 15px 0; }
        .steps .step > ul li a {
          color: #fff; }
          .steps .step > ul li a:hover {
            border-bottom: solid 1px #fff; }
          .steps .step > ul li a span {
            display: inline-block; }
            .steps .step > ul li a span:first-child {
              width: 4em; }
    .steps .step a::after {
      display: inline-block;
      content: "\f105";
      font-family: FontAwesome;
      margin-left: .9em; }
  .steps .arrow {
    display: block;
    max-width: 80px;
    margin: 0 auto 5px; }

.step-heading {
  margin: -120px 0 4em;
  padding-top: 100px; }
  @media screen and (min-width: 768px) {
    .step-heading {
      margin-bottom: 2em; } }
  .step-heading h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2em 0 1em 3px;
    border: solid 5px #6ba7d3;
    border-radius: 10px; }
    .step-heading h2 > span:first-child {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90px;
      height: 90px;
      min-width: 90px;
      margin: -20px 10px -20px -20px;
      padding-top: 16px;
      background-color: #6ba7d3;
      border-radius: 100px;
      color: #fff; }
      @media screen and (min-width: 768px) {
        .step-heading h2 > span:first-child {
          width: 100px;
          height: 100px;
          margin-right: 20px; } }
      .step-heading h2 > span:first-child > span:first-child {
        font-size: 0.8em; }
      .step-heading h2 > span:first-child > span:last-child {
        font-size: 2em; }
    .step-heading h2 > span:last-child {
      padding-top: 6px;
      color: #2B6792; }
      @media screen and (min-width: 768px) {
        .step-heading h2 > span:last-child {
          padding-top: 4px; } }
  .step-heading p {
    font-size: 1.1em; }

.next-link {
  margin: 60px 0;
  text-align: center; }
  .next-link a {
    display: inline-block;
    margin: 10px 0;
    padding: 15px 20px 13px 30px;
    border: solid 3px #6ba7d3;
    border-radius: 50px;
    font-size: 1em;
    font-weight: bold;
    transition: 0.3s; }
    @media screen and (min-width: 768px) {
      .next-link a {
        padding: 15px 30px 13px 40px;
        font-size: 1.3em; }
        .next-link a:hover {
          background-color: #6ba7d3;
          color: #fff;
          text-decoration: none;
          transition: 0.3s; }
          .next-link a:hover::after {
            left: 5px;
            transition: 0.3s; } }
    .next-link a::after {
      position: relative;
      left: 0;
      display: inline-block;
      content: "\f105";
      font-family: FontAwesome;
      margin-left: .9em;
      transition: 0.3s; }

.related-box {
  display: table;
  margin: 80px auto;
  padding: 12px 20px 10px 30px;
  border: solid 1px #777; }
  .related-box a {
    text-decoration: underline; }
    .related-box a:hover {
      text-decoration: none; }

#content2_1_9 > h3 {
  margin: 40px auto 10px;
  color: #888;
  font-size: 1.5em;
  text-align: center; }
  #content2_1_9 > h3 span {
    display: block; }
    @media screen and (min-width: 768px) {
      #content2_1_9 > h3 span {
        vertical-align: middle;
        display: inline-block; } }
    #content2_1_9 > h3 span:nth-child(1), #content2_1_9 > h3 span:nth-child(3) {
      min-width: 200px;
      padding: 8px 40px 5px;
      border: solid 5px #999;
      border-radius: 50px; }
    #content2_1_9 > h3 span:nth-child(1) {
      background-color: #999;
      color: #fff; }
    #content2_1_9 > h3 span:nth-child(2) {
      padding: 14px 10px 10px;
      font-size: 2em; }
    @media screen and (max-width: 767px) {
      #content2_1_9 > h3 span:nth-child(2) {
        padding: 5px;
        transform: rotate(90deg); } }

#content4_1_1 .list-box-container {
  display: flex;
  flex-wrap: wrap; }
#content4_1_1 .list-box {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 30px auto;
  padding-top: 90px;
  padding-left: 0; }
  @media screen and (min-width: 768px) {
    #content4_1_1 .list-box {
      max-width: 600px;
      padding-left: 20px; } }
  @media screen and (min-width: 992px) {
    #content4_1_1 .list-box {
      width: 45%;
      padding-left: 20px; } }
  #content4_1_1 .list-box:first-child {
    background-color: #FFDAC6; }
  #content4_1_1 .list-box:last-child {
    background-color: #C4EFB9; }
  #content4_1_1 .list-box img {
    position: absolute;
    top: -13px;
    left: -11px;
    max-width: 100%; }

#content4_1_6 .table-responsive {
  max-width: 800px;
  margin: 20px auto 25px; }
#content4_1_6 table {
  margin: -1px 0 0; }
  #content4_1_6 table th,
  #content4_1_6 table td {
    text-align: center;
    vertical-align: middle; }
  #content4_1_6 table th {
    background-color: #999;
    color: #fff; }
  #content4_1_6 table tr:nth-child(2) td {
    background-color: #ffe7e7; }
    #content4_1_6 table tr:nth-child(2) td:first-child {
      background-color: #ea0000; }
  #content4_1_6 table tr:nth-child(3) td {
    background-color: #ddf7dd; }
    #content4_1_6 table tr:nth-child(3) td:first-child {
      background-color: #00b000; }
  #content4_1_6 table tr:nth-child(4) td {
    background-color: #fff3cd; }
    #content4_1_6 table tr:nth-child(4) td:first-child {
      background-color: #c49500; }
  #content4_1_6 table td:nth-child(1) {
    font-weight: bold;
    font-size: 1.3em;
    color: #fff;
    text-shadow: 1px 1px 1px #333; }
  #content4_1_6 table td:nth-child(2) {
    font-weight: bold;
    font-size: 1.3em;
    color: #666; }
  #content4_1_6 table td:nth-child(3),
  #content4_1_6 table td:nth-child(5) {
    font-weight: bold;
    font-size: 1.1em;
    color: #666; }
  #content4_1_6 table td:nth-child(4),
  #content4_1_6 table td:nth-child(6) {
    text-align: left; }

#content4_5_1 > div {
  max-width: 900px;
  margin: 30px auto; }
  #content4_5_1 > div > div {
    margin: 10px;
    background-color: #c9d0d7;
    border-radius: 10px; }
    @media screen and (min-width: 768px) {
      #content4_5_1 > div > div {
        display: flex;
        align-items: center; } }
    #content4_5_1 > div > div h3 {
      margin: 0;
      padding: 15px;
      background-color: #1f4e79;
      border-radius: 10px;
      text-align: center;
      color: #fff; }
      @media screen and (min-width: 768px) {
        #content4_5_1 > div > div h3 {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 250px;
          margin-right: 10px;
          line-height: 1.3; } }
      #content4_5_1 > div > div h3 span {
        display: inline-block;
        margin: 0 5px; }
        #content4_5_1 > div > div h3 span:last-child {
          font-size: 0.8em; }
    #content4_5_1 > div > div p {
      margin: 0;
      padding: 10px;
      font-weight: bold;
      font-size: 1.2em;
      color: #444; }
      #content4_5_1 > div > div p span {
        font-size: 0.9em; }
    #content4_5_1 > div > div:last-child {
      background-color: #ccccdb; }
      #content4_5_1 > div > div:last-child h3 {
        background-color: #333399; }

#content4_5_2 > div {
  max-width: 900px;
  margin: 30px auto; }
  #content4_5_2 > div > div {
    margin: 10px;
    border-radius: 5px;
    background-color: #ececec; }
    @media screen and (min-width: 768px) {
      #content4_5_2 > div > div {
        display: flex;
        align-items: flex-start; } }
    #content4_5_2 > div > div h3 {
      margin: 0;
      padding: 6px 15px;
      border-radius: 5px;
      background-color: #626262;
      color: #fff;
      font-size: 1.0em; }
    #content4_5_2 > div > div p {
      align-self: center;
      margin: 0;
      padding: 10px 20px;
      font-size: 1.2em;
      font-weight: bold; }
    #content4_5_2 > div > div:first-child p {
      color: #2e75b6; }
    #content4_5_2 > div > div:last-child p {
      color: #e33; }

#content4_6_4 img {
  max-width: 200px; }
  @media screen and (min-width: 768px) {
    #content4_6_4 img {
      max-width: 250px; } }

#content4_8_2 .table-responsive {
  max-width: 800px;
  margin: 10px auto; }
  @media screen and (max-width: 767px) {
    #content4_8_2 .table-responsive {
      border: none; }
      #content4_8_2 .table-responsive > .table-bordered > tbody > tr > th:first-child,
      #content4_8_2 .table-responsive > .table-bordered > tbody > tr > td:first-child {
        border-left: 1px solid #ddd; }
      #content4_8_2 .table-responsive > .table-bordered > tbody > tr:last-child > th,
      #content4_8_2 .table-responsive > .table-bordered > tbody > tr:last-child > td {
        border-bottom: 1px solid #ddd; } }
#content4_8_2 .table-bordered {
  border: none; }
#content4_8_2 th {
  border-bottom-width: 3px;
  color: #c00;
  text-align: center; }
#content4_8_2 td {
  text-align: center; }
  #content4_8_2 td:nth-child(1), #content4_8_2 td:nth-child(2), #content4_8_2 td:nth-child(3) {
    text-align: right; }
  #content4_8_2 td:nth-child(7) {
    border-width: 0 !important;
    background: none !important; }
  #content4_8_2 td:nth-child(8) {
    border-width: 0 !important;
    color: #fff;
    font-weight: bold; }
#content4_8_2 tr:nth-child(2) td:nth-child(8) {
  background-color: #ea0000; }
#content4_8_2 tr:nth-child(3) td {
  background-color: #eee; }
  #content4_8_2 tr:nth-child(3) td:nth-child(8) {
    background-color: #00b000; }
#content4_8_2 tr:nth-child(4) td:nth-child(8) {
  background-color: #c49500; }
#content4_8_2 tr:nth-child(5) td {
  background-color: #eee; }
  #content4_8_2 tr:nth-child(5) td:nth-child(8) {
    background-color: #666; }

.content-4-11 .lead img {
  margin-bottom: 1.5em; }
  @media screen and (min-width: 768px) {
    .content-4-11 .lead img {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto; } }
.content-4-11 article img {
  margin: 2em 0; }
  @media screen and (min-width: 768px) {
    .content-4-11 article img {
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (min-width: 768px) {
    .content-4-11 article img.semi {
      max-width: 700px; } }
.content-4-11 .step-heading-box {
  margin: 2em 0; }
  .content-4-11 .step-heading-box .step-heading {
    margin: 0 0 -1px; }
.content-4-11 .step-heading {
  margin: 0 0 1em;
  padding: 8px 8px 5px;
  border: solid 1px #000;
  font-weight: bold;
  font-size: 1.3em; }
  .content-4-11 .step-heading.step1 {
    background-color: #BDD6EE; }
  .content-4-11 .step-heading.step2 {
    background-color: #F7CAAC; }
  .content-4-11 .step-heading.step3 {
    background-color: #FFE599; }
  .content-4-11 .step-heading.step4 {
    background-color: #C5E0B3; }
  .content-4-11 .step-heading span:first-child {
    margin-right: 0.5em; }
.content-4-11 .step h4 {
  margin-top: 3em;
  margin-bottom: 1em;
  font-size: 1.3em; }
.content-4-11 .step table th {
  background-color: #d6a4ea; }
.content-4-11 .sub-step {
  margin: 1.5em 0 2em;
  font-size: 1.2em;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .content-4-11 .sub-step {
      margin: 1.5em 1em 2em; } }
  .content-4-11 .sub-step h4 {
    margin: 1em 0 0 !important;
    font-size: 1em !important; }
  .content-4-11 .sub-step ol {
    padding-left: 1.5em; }
    .content-4-11 .sub-step ol li {
      margin-top: 0.3em; }

#content4_11_2 th {
  background-color: #d1d1d1; }
#content4_11_2 tr:nth-child(4) td {
  color: #e00; }

#content4_11_4 table th {
  background-color: #d6a4ea; }
#content4_11_4 table td {
  vertical-align: middle; }
  @media screen and (min-width: 768px) {
    #content4_11_4 table td:first-child {
      min-width: 220px; } }

#content4_11_6_1 .sub-step h4 {
  color: #659FD7; }

#content4_11_6_2 .sub-step h4 {
  color: #EC833E; }

#content4_11_6_3 .sub-step h4 {
  color: #F0B300; }
#content4_11_6_3 strong {
  font-size: 1.4em; }
#content4_11_6_3 table {
  margin: 2em auto 1em; }
  @media screen and (min-width: 768px) {
    #content4_11_6_3 table {
      max-width: 800px; } }
  #content4_11_6_3 table tr:first-child th {
    background-color: #bababa; }

#content4_11_6_4 .sub-step h4 {
  color: #7CB954; }
#content4_11_6_4 strong {
  font-size: 1.4em; }