@media screen and (min-width: 1024px) {
  .visible-md, .visible-sm {
    display: none
  }
  .visible-lg {
    display: inherit
  }
}
@media screen and (min-width: 750px) and (max-width: 1023px) {
  .visible-lg, .visible-sm {
    display: none
  }
  .visible-md {
    display: inherit
  }
}
@media screen and (max-width: 749px) {
  .visible-lg, .visible-md {
    display: none
  }
  .visible-sm {
    display: inherit
  }
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.5
}
p {
  line-height: 1.8
}

html {
  font-size: 15px
}

@media screen and (max-width: 480px) {
  html {
    font-size: 2.66666vw
  }
}
body {
  width: 100%;
  overflow-x: hidden;
  background: #fff;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  color: #231815
}
main {
  display: block
}
li {
  list-style-type: none
}
a {
  display: inline-block;
  text-decoration: none;
  color: #231815
}
@media screen and (min-width: 750px) {
  a {
    -webkit-transition: all .3s;
    transition: all .3s
  }
  a::before, a::after {
    -webkit-transition: all .3s;
    transition: all .3s
  }
}
img {
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
  height: auto
}
svg {
  width: 100%;
  height: auto
}
sup {
  font-size: 0.5em;
  vertical-align: super
}
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%
}
address {
  font-style: normal
}
@media screen and (min-width: 750px) {
  .l-inner-lg {
    width: 90%;
    max-width: 70rem;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-lg {
    padding: 0 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .l-inner-md {
    width: 90%;
    max-width: 61.3rem;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-md {
    padding: 0 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .l-inner-ex {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto
  }
}
@media screen and (min-width: 750px) {
  .l-inner-sm {
    width: 90%;
    max-width: 920px;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-sm {
    padding: 0 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .page__outer {
    max-width: 70rem;
    margin: 0 auto;
    position: relative
  }
}
.footer {
  border-top: 1px solid #231815
}
@media screen and (min-width: 750px) {
  .footer {
    font-size: 1rem;
    padding: 2.5rem 0 10rem
  }
}
@media screen and (max-width: 749px) {
  .footer {
    font-size: 1.1rem;
    padding: 1.3rem 0 10rem
  }
}
.footer__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media screen and (max-width: 749px) {
  .footer__logo {
    width: 11.3rem
  }
}
@media screen and (min-width: 750px) {
  .footer__adress {
    margin-left: 2rem
  }
}
@media screen and (max-width: 749px) {
  .footer__adress {
    margin-left: 1rem
  }
}
.footerList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media screen and (min-width: 750px) {
  .footerList {
    margin: 2.5rem 0
  }
}
@media screen and (max-width: 749px) {
  .footerList {
    margin: 1.3rem 0
  }
}
.footer__link + .footer__link {
  border-left: 1px solid #231815
}
@media screen and (min-width: 750px) {
  .footer__link + .footer__link {
    padding-left: 2.5rem;
    margin-left: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .footer__link + .footer__link {
    padding-left: 1.5rem;
    margin-left: 1.5rem
  }
}
.footer__link.-window {
  position: relative
}
.footer__link.-window::after {
  content: "";
  background-image: url(../img/icon-window.png);
  background-size: 100%;
  position: absolute;
  top: -.6rem;
  right: -1rem
}
@media screen and (min-width: 750px) {
  .footer__link.-window::after {
    width: 1.1rem;
    height: 1.1rem
  }
}
@media screen and (max-width: 749px) {
  .footer__link.-window::after {
    width: .6rem;
    height: .6rem
  }
}
.copyright {
  text-align: center
}
.Contentsarea {
  padding: 6rem 0
}
.hero {
  max-width: 70rem;
  margin: 0 auto;
  background-image: url(../img/card-anime.gif);
  background-size: cover;
  position: relative
}
@media screen and (min-width: 750px) {
  .hero {
    height: 39.7rem;
    margin-bottom: 25px
  }
}
@media screen and (max-width: 749px) {
  .hero {
    height: 19.9rem;
    margin-bottom: 2rem
  }
}
@media screen and (min-width: 750px) {
  .modal-open.ctabtn {
    width: 33rem;
    position: fixed;
    bottom: 1rem;
    right: 0;
    z-index: 10
  }
  .modal-open.ctabtn:hover {
    opacity: .9
  }
}
@media screen and (max-width: 749px) {
  .modal-open.ctabtn {
    display: none
  }
}
@media screen and (min-width: 750px) {
  .modal-open.ctabtn__sp {
    display: none
  }
}
@media screen and (max-width: 749px) {
  .modal-open.ctabtn__sp {
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 10;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 35rem
  }
}
.hero__inner {
  margin: 0 auto
}
@media screen and (min-width: 750px) {
  .hero__inner {
    width: 62rem
  }
}
@media screen and (max-width: 749px) {
  .hero__inner {
    width: 88.6%
  }
}
@media screen and (min-width: 750px) {
  .hero__textbox {
    width: 39.6rem;
    padding-top: 2rem
  }
}
@media screen and (max-width: 749px) {
  .hero__textbox {
    width: 60%;
    padding-top: 1rem
  }
}
.hero__text {
  color: #004098
}
@media screen and (min-width: 750px) {
  .hero__text {
    font-size: 2.9rem
  }
}
@media screen and (max-width: 749px) {
  .hero__text {
    font-size: 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .mcg__img {
    margin-bottom: 2rem
  }
}
@media screen and (max-width: 749px) {
  .mcg__img {
    margin-bottom: 1rem
  }
}
@media screen and (min-width: 750px) {
  .banner {
    margin-bottom: 4rem
  }
}
@media screen and (max-width: 749px) {
  .banner {
    margin-bottom: 2rem
  }
}
.bannerarea {
  border: 2px solid #e60012
}
.banner__whiteBg {
  padding: 1rem 1.5rem
}
@media screen and (min-width: 750px) {
  .banner__text {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .banner__text {
    font-size: 1.4rem
  }
}
@media screen and (min-width: 750px) {
  .banner__textsm {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .banner__textsm {
    font-size: 1.2rem
  }
}
@media screen and (min-width: 750px) {
  .reason {
    padding-bottom: 10px
  }
}
.reasonList {
  background-color: #f6f6f6
}
@media screen and (min-width: 750px) {
  .reasonList {
    padding: 1.3rem 1.4rem
  }
}
@media screen and (max-width: 749px) {
  .reasonList {
    padding: .6rem .7rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem:nth-child(1) .reasonItem__title {
    width: 74.13793%
  }
  .reasonItem:nth-child(2) .reasonItem__title {
    width: 77.06897%
  }
  .reasonItem:nth-child(3) .reasonItem__title {
    width: 58.10345%
  }
}
@media screen and (max-width: 749px) {
  .reasonItem:nth-child(1) .reasonItem__title {
    width: 74.13793%
  }
  .reasonItem:nth-child(2) .reasonItem__title {
    width: 77.06897%
  }
  .reasonItem:nth-child(3) .reasonItem__title {
    width: 58.10345%
  }
}
@media screen and (min-width: 750px) {
  .reasonItem {
    border: 2px solid #004199
  }
}
@media screen and (max-width: 749px) {
  .reasonItem {
    border: 1px solid #004199
  }
}
@media screen and (min-width: 750px) {
  .reasonItem + .reasonItem {
    margin-top: 2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem + .reasonItem {
    margin-top: 1rem
  }
}
.reasonItem__titlebox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.reasonItem__numberbox {
  position: relative;
  background-color: #004199
}
@media screen and (min-width: 750px) {
  .reasonItem__numberbox {
    width: 9.2rem;
    height: 12.3rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__numberbox {
    width: 4.6rem;
    height: 6.1rem
  }
}
.reasonItem__number {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}
@media screen and (min-width: 750px) {
  .reasonItem__title {
    margin-left: 2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__title {
    margin-left: 1rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__textbox {
    border-top: 2px solid #004199;
    padding: 2rem 2.6rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__textbox {
    border-top: 1px solid #004199;
    padding: 1rem 1rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext__outer {
    margin: 1.5rem 0
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext__outer {
    margin: .8rem 0
  }
}
.reasonItem__flextext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline
}
.reasonItem__flextext + .reasonItem__flextext {
  margin: 1rem 0
}
.reasonItem__flextext.-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.reasonItem__flextext.flex-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}
.reasonItem__flextext .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.reasonItem__flextext .center {
  text-align: center
}
.reasonItem__flextext .bold {
  font-weight: bold
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-64 {
    font-size: 6.4rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-64 {
    font-size: 3.5rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-40 {
    font-size: 4rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-40 {
    font-size: 2rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-30 {
    font-size: 1.5rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-30 {
    font-size: .8rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-28 {
    font-size: 2.8rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-28 {
    font-size: 1.6rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-20 {
    font-size: 2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-20 {
    font-size: 1.4rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-16 {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-16 {
    font-size: .8rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-15 {
    font-size: 1.5rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-15 {
    font-size: 1rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .f-13 {
    font-size: 1.3rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .f-13 {
    font-size: .8rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .mr-25 {
    margin-right: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .mr-25 {
    margin-right: 1.3rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .mr-2 {
    margin-right: 2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .mr-2 {
    margin-right: 1rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .mr-1 {
    margin-right: 1rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .mr-1 {
    margin-right: .8rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .mr-05 {
    margin-right: .5rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .mr-05 {
    margin-right: .8rem
  }
}
.reasonItem__flextext .lh-1 {
  line-height: 1
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .number300 {
    width: 8.3rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .number300 {
    width: 4.5rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .number200 {
    width: 6.7rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .number200 {
    width: 4rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .number647 {
    width: 18.7rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .number647 {
    width: 8.2rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .number847 {
    width: 15.2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .number847 {
    width: 8.2rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .atm {
    width: 13.9rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .atm {
    width: 8rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .number3 {
    width: 2.6rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .number3 {
    width: 1.3rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .number {
    width: 4.2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .number {
    width: 2.4rem
  }
}
.reasonItem__flextext .blue {
  color: #004098
}
.reasonItem__flextext .orange {
  color: #ec6d4e
}
.reasonItem__flextext .white {
  color: #fff
}
.reasonItem__flextext .allowBlue {
  position: relative;
  background-color: #a4a9d4
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .allowBlue {
    height: 3rem;
    line-height: 3rem;
    padding: 0 0 0 1rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .allowBlue {
    height: 1.6rem;
    line-height: 1.6rem;
    padding: 0 0 0 .5rem
  }
}
.reasonItem__flextext .allowBlue::after {
  content: "";
  position: absolute;
  top: 0
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .allowBlue::after {
    border-left: 1rem solid #a4a9d4;
    border-top: 1.5rem solid transparent;
    border-bottom: 1.5rem solid transparent;
    right: -1rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .allowBlue::after {
    border-left: .5rem solid #a4a9d4;
    border-top: .8rem solid transparent;
    border-bottom: .8rem solid transparent;
    right: -.5rem
  }
}
.reasonItem__flextext .h-flex, .reasonItem__flextext .d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
@media screen and (min-width: 750px) {
  .reasonItem__flextext .h-flex::before, .reasonItem__flextext .h-flex::after, .reasonItem__flextext .d-flex::before, .reasonItem__flextext .d-flex::after {
    font-size: 3rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__flextext .h-flex::before, .reasonItem__flextext .h-flex::after, .reasonItem__flextext .d-flex::before, .reasonItem__flextext .d-flex::after {
    font-size: 1.5rem
  }
}
.reasonItem__flextext .h-flex::before {
  content: "("
}
.reasonItem__flextext .h-flex::after {
  content: ")"
}
.reasonItem__flextext .d-flex::before {
  content: "["
}
.reasonItem__flextext .d-flex::after {
  content: "]"
}
.reasonItem__text {
  line-height: 1.7
}
@media screen and (min-width: 750px) {
  .reasonItem__text {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__text {
    font-size: 1.4rem
  }
}
.reasonItem__text.lh-1 {
  line-height: 1
}
.reasonItem__text.-center {
  text-align: center
}
.reasonItem__text.-blue {
  color: #004199
}
@media screen and (min-width: 750px) {
  .reasonItem__text .f-40 {
    font-weight: bold;
    font-size: 2rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__text .f-40 {
    font-size: 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__text .f-26 {
    font-size: 1.3rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__text .f-26 {
    font-size: 1.2rem
  }
}
@media screen and (min-width: 750px) {
  .reasonItem__text .f-22 {
    font-size: 1.1rem
  }
}
@media screen and (max-width: 749px) {
  .reasonItem__text .f-22 {
    font-size: 1.2rem
  }
}
@media screen and (min-width: 750px) {
  .sec {
    max-width: 70rem;
    margin: 0 auto;
    padding: 5rem 0
  }
}
@media screen and (max-width: 749px) {
  .sec {
    padding: 2.5rem 0
  }
}
.bg-gray {
  background-color: #f6f6f6
}
.graph__title {
  color: #004199
}
@media screen and (min-width: 750px) {
  .graph__title {
    margin-bottom: 2rem
  }
}
@media screen and (max-width: 749px) {
  .graph__title {
    margin-bottom: 2rem;
    width: 98%
  }
}
@media screen and (min-width: 750px) {
  .graph__text {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .graph__text {
    font-size: 1.4rem
  }
}
.grahu__area {
  position: relative;
  margin-top: 6rem
}
.grahu__area p {
  text-align: center;
  margin: 1.5em;
}
@media screen and (min-width: 750px) {
  .grahu__area .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}
@media screen and (max-width: 749px) {
  .grahu__area {
    margin-top: 3rem
  }
}
.grahu__area::before {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}
@media screen and (min-width: 750px) {
  .grahu__area::before {
    border-top: 2rem solid #004098;
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    top: -5rem
  }
}
@media screen and (max-width: 749px) {
  .grahu__area::before {
    border-top: 1rem solid #004098;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    top: -2.5rem
  }
}
@media screen and (min-width: 750px) {
  .graph__img {
    width: 30%;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .graph__img {
    width: 24.2rem;
    margin: 0 auto
  }
  .graph__img + .graph__img {
    margin-top: 2rem
  }
}
@media screen and (max-width: 749px) {
  .pc {
    display: none
  }
}
@media screen and (min-width: 750px) {
  .sp {
    display: none
  }
}
.flowarea {
  border: 1px solid #004199
}
.flow__title {
  color: #fff;
  background-color: #004199
}
@media screen and (min-width: 750px) {
  .flow__title {
    font-size: 1.4rem;
    padding: .5rem 2rem
  }
}
@media screen and (max-width: 749px) {
  .flow__title {
    font-size: 1.4rem;
    padding: .3rem 1rem
  }
}
.flowList {
  background-size: cover
}
@media screen and (min-width: 750px) {
  .flowList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-position: top 50% left 70%;
    background-image: url(../img/flow_bg.jpg)
  }
}
@media screen and (max-width: 749px) {
  .flowList .flowItem {
    position: relative;
    padding: 2rem 2rem 0
  }
  .flowList .flowItem:nth-child(1) {
    background: #d2d4eb;
    z-index: 6
  }
  .flowList .flowItem:nth-child(1)::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5rem 17.15rem 0 17.15rem;
    border-color: #d2d4eb transparent transparent transparent;
    position: absolute;
    bottom: -5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
  .flowList .flowItem:nth-child(2) {
    background: #e9eaf5;
    z-index: 5
  }
  .flowList .flowItem:nth-child(2)::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5rem 17.15rem 0 17.15rem;
    border-color: #e9eaf5 transparent transparent transparent;
    position: absolute;
    bottom: -5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
  .flowList .flowItem:nth-child(3) {
    z-index: 1;
    padding-bottom: 2rem
  }
}
.flowItem {
  position: relative;
  position: relative
}
@media screen and (min-width: 750px) {
  .flowItem {
    width: 33.3333%;
    padding: 1rem 0
  }
}
@media screen and (max-width: 749px) {
  .flowItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}
@media screen and (max-width: 749px) {
  .flowItem + .flowItem {
    padding-top: 4rem
  }
}
.flowItem__step {
  text-align: center;
  color: #004199;
  line-height: 1.2
}
@media screen and (min-width: 750px) {
  .flowItem__step {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .flowItem__step {
    font-size: 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .flowItem__img {
    margin: 0 auto 1rem;
    width: 58%
  }
}
@media screen and (max-width: 749px) {
  .flowItem__img {
    width: 6.2rem;
    min-width: 6.2rem
  }
}
@media screen and (min-width: 750px) {
  .flowItem__textbox {
    width: 77%;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .flowItem__textbox {
    margin: 2rem 0 0 1.8rem
  }
}
.flowItem__title {
  color: #004199
}
@media screen and (min-width: 750px) {
  .flowItem__title {
    font-size: 1.0rem;
    margin-bottom: 1rem;
    text-align: center
  }
}
@media screen and (max-width: 749px) {
  .flowItem__title {
    font-size: 1.4rem;
    margin-bottom: .5rem
  }
}
@media screen and (min-width: 750px) {
  .flowItem__text {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .flowItem__text {
    font-size: 1.2rem
  }
}
.flowItem__text .red {
  color: #e60012;
  margin-bottom: .5rem
}
@media screen and (min-width: 750px) {
  .flowItem__text + .flowItem__text {
    margin-top: .4rem
  }
}
.flow__text {
  border-top: .1rem solid #004199
}
@media screen and (min-width: 750px) {
  .flow__text {
    font-size: 1rem;
    padding: 1rem
  }
}
@media screen and (max-width: 749px) {
  .flow__text {
    font-size: 1.2rem;
    padding: .5rem
  }
}
.flowTable {
  margin-top: 5rem
}
.flowTable .flowColumn:nth-child(odd) {
  background-color: #f0f1f8
}
.flowTable .flowColumn:nth-child(even) {
  background-color: #f9fafd
}
@media screen and (min-width: 750px) {
  .flowColumn {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .flowColumn {
    font-size: 1.2rem
  }
}
.flowColumn__cat, .flowColumn__text {
  border: 1px solid #004098;
  vertical-align: middle
}
@media screen and (min-width: 750px) {
  .flowColumn__cat, .flowColumn__text {
    padding: 1rem .9rem
  }
}
@media screen and (max-width: 749px) {
  .flowColumn__cat, .flowColumn__text {
    padding: .5rem .6rem
  }
}
.flowColumn__cat {
  text-align: left;
  font-weight: normal
}
@media screen and (min-width: 750px) {
  .flowColumn__cat {
    font-size: 1rem;
    width: 30%
  }
}
@media screen and (max-width: 749px) {
  .flowColumn__cat {
    font-size: 1.2rem;
    width: 35%
  }
}
@media screen and (min-width: 750px) {
  .flowColumn__text .f-24 {
    font-size: .9rem
  }
}
@media screen and (max-width: 749px) {
  .flowColumn__text .f-24 {
    font-size: 1.1rem
  }
}
.flowColumn__text .link {
  color: #0068b7;
  border-bottom: .1rem solid #0068b7
}
@media screen and (min-width: 750px) {
  .conditionsarea {
    margin-top: 3rem
  }
}
@media screen and (max-width: 749px) {
  .conditionsarea {
    margin-top: 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .conditions__text {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .conditions__text {
    font-size: 1.2rem
  }
}
@media screen and (min-width: 750px) {
  .conditions__textsm {
    font-size: .9rem
  }
}
@media screen and (max-width: 749px) {
  .conditions__textsm {
    font-size: 1.2rem
  }
}
.conditions__frametext {
  border: .1rem solid #000000
}
@media screen and (min-width: 750px) {
  .conditions__frametext {
    font-size: 1rem;
    padding: 1rem 2rem;
    margin: 2rem 0
  }
}
@media screen and (max-width: 749px) {
  .conditions__frametext {
    font-size: 1.2rem;
    padding: .5rem 1rem;
    margin: 1rem 0
  }
}
@media screen and (min-width: 750px) {
  .conditionsList {
    margin: 1rem 0
  }
}
@media screen and (max-width: 749px) {
  .conditionsList {
    margin: .5rem 0
  }
}
.conditionsItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
.conditionsItem::before {
  content: "●"
}
@media screen and (min-width: 750px) {
  .conditionsItem {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .conditionsItem {
    font-size: 1.2rem
  }
}
.modal-open {
  display: inline-block;
  cursor: pointer
}
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 12
}
.modal-container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%
}
.modal-container.active {
  opacity: 12;
  visibility: visible
}
.modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 90%
}
@media screen and (min-width: 750px) {
  .modal-body {
    max-width: 45rem
  }
}
@media screen and (max-width: 749px) {
  .modal-body {
    max-width: 35rem;
    max-height: 86%;
    overflow: scroll
  }
}
.modal-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem
}
.modal-close::after {
  content: "";
  background-image: url(../img/close.svg);
  width: 1.4rem;
  height: 1.4rem;
  margin-left: .5rem
}
.modal-content {
  background: #fff;
  text-align: left;
  border-top: .4rem solid #004098;
  border-bottom: .4rem solid #004098
}
@media screen and (min-width: 750px) {
  .modal-content {
    padding: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .modal-content {
    padding: 3rem 1.5rem
  }
}
.modal__title {
  font-weight: normal;
  text-align: center
}
@media screen and (min-width: 750px) {
  .modal__title {
    margin-bottom: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .modal__title {
    margin-bottom: 2.5rem
  }
}
.modal__title .ja {
  color: #004098
}
@media screen and (min-width: 750px) {
  .modal__title .ja {
    font-size: 1.8rem
  }
}
@media screen and (max-width: 749px) {
  .modal__title .ja {
    font-size: 2.1rem
  }
}
.modal__mcg {
  margin: 0 auto
}
@media screen and (min-width: 750px) {
  .modal__mcg {
    width: 19rem
  }
}
@media screen and (max-width: 749px) {
  .modal__mcg {
    width: 21rem
  }
}
.modal__text {
  text-align: center;
  font-weight: bold
}
@media screen and (min-width: 750px) {
  .modal__text {
    font-size: 2.1rem;
    margin-bottom: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .modal__text {
    font-size: 1.9rem;
    margin-bottom: 2.5rem
  }
}
@media screen and (min-width: 750px) {
  .modalbtnarea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .modalbtnarea {
    margin-bottom: 4rem
  }
}
@media screen and (min-width: 750px) {
  .modal__btnbox + .modal__btnbox {
    margin-left: 2.5rem
  }
}
@media screen and (max-width: 749px) {
  .modal__btnbox + .modal__btnbox {
    margin-top: 1.5rem
  }
}
.modal__btn {
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #004098;
  border-radius: .6rem;
  -webkit-box-shadow: 2px 2px 2px 2px #c9caca;
  box-shadow: 2px 2px 2px 2px #c9caca;
  text-decoration:none;
}
@media screen and (min-width: 750px) {
  .modal__btn {
    width: 15rem;
    font-size: 1.6rem;
    padding: 1.5rem;
    line-height: 1.4
  }
}
@media screen and (max-width: 749px) {
  .modal__btn {
    width: 100%;
    font-size: 1.8rem;
    padding: 1rem;
    line-height: 1
  }
}
@media screen and (min-width: 750px) {
  .modal__btn .sm {
    font-size: 1.2rem
  }
}
@media screen and (max-width: 749px) {
  .modal__btn .sm {
    font-size: 1.3rem
  }
}
@media screen and (min-width: 750px) {
  .modal__textsm {
    font-size: 1rem
  }
}
@media screen and (max-width: 749px) {
  .modal__textsm {
    font-size: 1.2rem
  }
}
@media screen and (min-width: 750px) {
  .modal__textsm + .modal__textsm {
    margin-top: 1rem
  }
}