@charset "UTF-8";
/* *** variables model *** */
/* color */
/* *** common variables *** */
/* break point */
/* hover style */
/* color */
/* One-Tone */
/* Two-Tone */
/* *** mixins *** */
/* break point */
/* hover */
/* --- 10px = 1rem --- */
/* intro */
.intro-area .acc-wrap.nml-acc-wrap .triggle .txt-triggle::after {
  content: "詳しく見る";
}
.intro-area .acc-wrap.nml-acc-wrap[open] .triggle .txt-triggle::after {
  content: "閉じる";
}
.intro-area .txt-space {
  padding-inline-start: 1em;
  text-indent: -1em;
}
.intro-area .no-wrap {
  display: inline-block;
}
.intro-area .bd-top {
  border-top: 1px solid var(--greyK20);
  margin-block-start: 2.4rem;
  padding-block-start: 2.4rem;
}
@media (min-width: 769px) {
  .intro-area .bd-top {
    margin-block-start: 4rem;
    padding-block-start: 4rem;
  }
}
.intro-area ol.flow > li {
  position: relative;
}
@media (min-width: 769px) {
  .intro-area ol.flow > li {
    margin-block-end: 9.6rem;
  }
}
@media (max-width: 768px) {
  .intro-area ol.flow > li {
    margin-block-end: 7.2rem;
  }
}
.intro-area ol.flow > li::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 769px) {
  .intro-area ol.flow > li::after {
    border-top: 30px solid #217fc4;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    bottom: -66px;
  }
}
@media (max-width: 768px) {
  .intro-area ol.flow > li::after {
    border-top: 20px solid #217fc4;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    bottom: -50px;
  }
}
.intro-area .app-area .app-area-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 769px) {
  .intro-area .app-area .app-area-title {
    margin-block-end: 3.2rem;
    gap: 2.4rem;
  }
}
@media (max-width: 768px) {
  .intro-area .app-area .app-area-title {
    flex-direction: column;
    margin-block-end: 1.6rem;
    gap: 1rem;
  }
}
.intro-area .app-area .app-area-title .app-area-icon {
  width: 80px;
}
@media (min-width: 769px) {
  .intro-area .app-area .app-area-title .app-area-text {
    font-size: 2.4rem;
    text-align: center;
    word-break: auto-phrase;
  }
}
@media (max-width: 768px) {
  .intro-area .app-area .app-area-title .app-area-text {
    font-size: 2rem;
  }
}
.intro-area .app-area ul.links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 769px) {
  .intro-area .app-area ul.links > li {
    padding: 20px 42px;
  }
}
@media (max-width: 768px) {
  .intro-area .app-area ul.links > li {
    padding: 1rem;
  }
}
@media (min-width: 769px) {
  .intro-area .app-area ul.links > li ul {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}
@media (min-width: 769px) {
  .intro-area .app-area ul.links > li ul .bnr {
    flex-basis: 180px;
  }
}
@media (max-width: 768px) {
  .intro-area .app-area ul.links > li ul .bnr {
    max-width: 150px;
  }
}
@media (min-width: 769px) {
  .intro-area .app-area ul.links > li ul .qr {
    flex-basis: 72px;
  }
}
@media (max-width: 768px) {
  .intro-area .app-area ul.links > li ul .qr {
    display: none;
  }
}
.intro-area .headline .txt-head {
  word-break: auto-phrase;
}
@media (min-width: 769px) {
  .intro-area .headline .txt-head {
    font-size: 2.4rem;
  }
}
@media (max-width: 768px) {
  .intro-area .headline .txt-head {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .intro-area .headline ul:not(.note-list) {
    gap: 1em;
  }
}
@media (min-width: 769px) {
  .intro-area .headline ul:not(.note-list) li {
    flex-basis: 188px;
  }
}
@media (min-width: 769px) {
  .intro-area {
    --step-gap: 2.4rem;
  }
}
@media (max-width: 768px) {
  .intro-area {
    --step-gap: 1em;
  }
}
.intro-area .step-app {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--step-gap);
}
@media (max-width: 768px) {
  .intro-area .step-app {
    row-gap: 4rem;
  }
}
@media (min-width: 769px) {
  .intro-area .step-app li {
    flex-basis: calc(25% - var(--step-gap) * 3 / 4);
  }
}
@media (max-width: 768px) {
  .intro-area .step-app li {
    flex-basis: calc(50% - var(--step-gap) / 2);
  }
}
.intro-area .step-except {
  display: flex;
  gap: var(--step-gap);
}
@media (min-width: 769px) {
  .intro-area .step-except .col-txt {
    flex-basis: calc(50% - var(--step-gap) / 2);
  }
}
@media (max-width: 768px) {
  .intro-area .step-except .col-txt {
    flex-basis: calc(50% - var(--step-gap) / 2);
  }
}
@media (min-width: 769px) {
  .intro-area .step-except .col-img {
    flex-basis: calc(25% - var(--step-gap) * 3 / 4);
  }
}
@media (max-width: 768px) {
  .intro-area .step-except .col-img {
    flex-basis: calc(50% - var(--step-gap) / 2);
  }
}
.intro-area .step-end {
  display: flex;
  gap: var(--step-gap);
}
@media (max-width: 768px) {
  .intro-area .step-end {
    flex-direction: column;
  }
}
@media (min-width: 769px) {
  .intro-area .step-end .pc-col-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .intro-area .step-end .pc-col-txt {
    display: contents;
  }
}
.intro-area .step-end .pc-col-txt .status {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .intro-area .step-end .pc-col-txt .status {
    flex-direction: column-reverse;
    order: 10;
    gap: 1em;
  }
}
@media (min-width: 769px) {
  .intro-area .step-end .pc-col-txt .status .col-txt {
    flex-basis: 51.8%;
  }
}
@media (min-width: 769px) {
  .intro-area .step-end .pc-col-txt .status .col-img {
    flex-basis: 32%;
  }
}
@media (max-width: 768px) {
  .intro-area .step-end .pc-col-txt .status .col-img {
    width: 71.14%;
    margin-inline: auto;
  }
}
@media (min-width: 769px) {
  .intro-area .step-end > .col-img {
    flex-basis: calc(25% - var(--step-gap) * 3 / 4);
  }
}
@media (max-width: 768px) {
  .intro-area .step-end > .col-img {
    width: 45.19%;
    margin-inline: auto;
    margin-block-end: 2.4rem;
  }
}
.intro-area .step-remote {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--step-gap);
  position: relative;
  overflow: hidden;
}
@media (min-width: 769px) {
  .intro-area .step-remote {
    width: 74.43%;
    margin-inline: auto;
    row-gap: 9.6rem;
  }
}
@media (max-width: 768px) {
  .intro-area .step-remote {
    row-gap: 5.6rem;
  }
}
@media (min-width: 769px) {
  .intro-area .step-remote li {
    flex-basis: calc(33.3% - var(--step-gap) * 2 / 3);
  }
}
@media (max-width: 768px) {
  .intro-area .step-remote li {
    flex-basis: calc(50% - var(--step-gap) / 2);
  }
}
@media (min-width: 769px) {
  .intro-area .step-remote li:nth-of-type(3) {
    position: relative;
  }
  .intro-area .step-remote li:nth-of-type(3)::after {
    content: "";
    position: absolute;
    bottom: -42px;
    left: -300%;
    width: 1000px;
    height: 1px;
    background-color: var(--greyK20);
  }
}
@media (max-width: 768px) {
  .intro-area .step-remote li:nth-of-type(2), .intro-area .step-remote li:nth-of-type(4) {
    position: relative;
  }
  .intro-area .step-remote li:nth-of-type(2)::after, .intro-area .step-remote li:nth-of-type(4)::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: -500px;
    width: 1000px;
    height: 1px;
    background-color: var(--greyK20);
  }
}/*# sourceMappingURL=intro.css.map */