@charset "UTF-8";
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;
  font-size: 100%;
  vertical-align: middle;
  background: transparent;
  list-style: none; }

body {
  background-color: #fff;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  box-sizing: border-box; }

@media only screen and (min-width: 768px) {
  .nopc {
    display: none; } }
@media only screen and (max-width: 767px) {
  .nosp {
    display: none; } }
a, a:visited {
  color: #333;
  text-decoration: none; }

a:hover {
  opacity: .6; }

header, footer {
  width: 100%;
  max-width: 1000px;
  margin: auto; }

header .logo-area {
  height: 60px;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 767px) {
    header .logo-area {
      height: 45px;
      padding-left: 8px; } }
  header .logo-area div {
    margin: 0 4px; }
    @media only screen and (max-width: 767px) {
      header .logo-area div img {
        width: auto;
        height: 18px; } }

footer {
  width: 100%;
  overflow: hidden;
  font-size: 0.875rem;
  margin-top: 80px; }
  footer ul.comp-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 25px;
    padding-right: 25px; }
    footer ul.comp-box li a {
      display: block;
      font-size: 12px;
      line-height: 1.8; }
    footer ul.comp-box li:not(:last-of-type) a::after {
      content: '|';
      font-size: 12px;
      display: inline-block;
      margin: 0 8px;
      color: #949494; }
  footer ul.comp-copy {
    display: flex;
    justify-content: center;
    font-size: 0.55rem; }
    footer ul.comp-copy li {
      margin: 25px 4px 0; }
      footer ul.comp-copy li:first-child {
        border-right: solid 1px #949494;
        padding-right: 8px; }
  footer ul.comp-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin: 0 24px; }
    @media only screen and (min-width: 640px) {
      footer ul.comp-bottom {
        padding: 16px 0; } }
    @media only screen and (max-width: 639px) {
      footer ul.comp-bottom {
        padding: 16px 8px;
        margin: 0; } }
    footer ul.comp-bottom li {
      margin: 0 8px; }
      @media only screen and (min-width: 470px) {
        footer ul.comp-bottom li:first-child {
          margin: 0 24px 0 0; } }
      @media only screen and (max-width: 469px) {
        footer ul.comp-bottom li:first-child {
          margin: 0 8px; } }
      footer ul.comp-bottom li:first-child img {
        max-width: 100%;
        max-height: 24px;
        height: auto; }
      footer ul.comp-bottom li:first-child .biglobe-logo {
        max-height: 36px;
        height: 36px; }
      footer ul.comp-bottom li img {
        max-width: 100%;
        max-height: 50px;
        height: auto; }
      footer ul.comp-bottom li .logo-area {
        display: flex;
        justify-content: center;
        align-items: center; }
        footer ul.comp-bottom li .logo-area div {
          margin: 0 4px; }
  footer #page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #333;
    opacity: 0.6; }
    footer #page_top a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      text-decoration: none; }
      footer #page_top a::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        width: 3px;
        height: 14px;
        background: #fff;
        margin: 0 auto; }
      footer #page_top a::after {
        content: '';
        position: relative;
        display: flex;
        text-decoration: none;
        margin-top: -3px;
        width: 8px;
        height: 8px;
        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg); }

.title-area {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: #c0e5ff; }
  .title-area h1 img {
    width: 100%;
    height: auto;
    max-width: 1200px; }

main {
  width: 100%; }
  main h2 {
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 1em; }
    @media only screen and (max-width: 767px) {
      main h2 {
        font-size: 1.375rem; } }
  main p.sub-ttl {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2em; }
    @media only screen and (max-width: 767px) {
      main p.sub-ttl {
        font-size: 1.25rem; } }
  main .entry-area {
    background-color: #005490;
    padding: 32px 0 40px;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      main .entry-area {
        padding-left: 2%;
        padding-right: 2%; } }
    main .entry-area p {
      color: #fff;
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: 16px; }
      @media only screen and (max-width: 767px) {
        main .entry-area p {
          font-size: 0.8125rem; } }
    @media only screen and (max-width: 767px) {
      main .entry-area img {
        width: 92%;
        height: auto; } }
  main .about-area, main .explain-area, main .point-area, main .step-area {
    padding: 56px 0 64px; }
    @media only screen and (max-width: 767px) {
      main .about-area, main .explain-area, main .point-area, main .step-area {
        padding-left: 4%;
        padding-right: 4%; } }
    main .about-area .sub-area, main .explain-area .sub-area, main .point-area .sub-area, main .step-area .sub-area {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto; }
    main .about-area h2 span, main .explain-area h2 span, main .point-area h2 span, main .step-area h2 span {
      background: linear-gradient(transparent 50%, #FFEF8F 50%);
      display: inline-block; }
  main .about-area {
    text-align: center; }
    @media only screen and (min-width: 768px) {
      main .about-area img.step {
        width: 100%;
        max-width: 911px;
        height: auto; } }
    @media only screen and (max-width: 767px) {
      main .about-area .banner-area .banner {
        padding-left: 0;
        padding-right: 0; } }
  main .explain-area {
    background-color: #EBF6FF; }
    @media only screen and (min-width: 768px) {
      main .explain-area .sub-area {
        display: flex;
        justify-content: space-between; } }
    main .explain-area .sub-area dl {
      width: 48%;
      border: 1px solid;
      border-radius: 8px;
      background-color: #fff; }
      @media only screen and (max-width: 767px) {
        main .explain-area .sub-area dl {
          width: 100%; } }
      main .explain-area .sub-area dl:first-child {
        border-color: #67B2EF; }
        main .explain-area .sub-area dl:first-child dt {
          background-color: #67B2EF; }
        main .explain-area .sub-area dl:first-child dd {
          display: flex;
          align-items: center; }
          main .explain-area .sub-area dl:first-child dd p {
            width: calc(100% - 75px);
            padding-right: 1em; }
            @media only screen and (max-width: 767px) {
              main .explain-area .sub-area dl:first-child dd p {
                width: calc(100% - 60px); } }
          @media only screen and (max-width: 767px) {
            main .explain-area .sub-area dl:first-child dd img {
              width: 60px;
              height: 60px; } }
      main .explain-area .sub-area dl:last-child {
        border-color: #4BCCBE; }
        @media only screen and (max-width: 767px) {
          main .explain-area .sub-area dl:last-child {
            margin-top: 16px; } }
        main .explain-area .sub-area dl:last-child dt {
          background-color: #4BCCBE; }
      main .explain-area .sub-area dl dt {
        text-align: center;
        font-size: 1.25rem;
        font-weight: 700;
        color: #fff;
        border-radius: 8px 8px 0 0;
        padding: 0.5em 0; }
      main .explain-area .sub-area dl dd {
        padding: 24px; }
        @media only screen and (max-width: 767px) {
          main .explain-area .sub-area dl dd {
            padding: 16px; } }
  main .point-area {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto; }
    main .point-area ul.list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto; }
      main .point-area ul.list li {
        width: calc(100% / 5);
        text-align: center; }
        @media only screen and (max-width: 767px) {
          main .point-area ul.list li {
            width: calc(100% / 3);
            margin-bottom: 24px; } }
        @media only screen and (max-width: 767px) {
          main .point-area ul.list li img {
            width: 105px;
            height: auto; } }
        @media only screen and (min-width: 768px) {
          main .point-area ul.list li:nth-child(-n+5) {
            margin-bottom: 40px; } }
        @media only screen and (max-width: 767px) {
          main .point-area ul.list li:last-child {
            margin-bottom: 0; } }
    main .point-area p.notice {
      margin-top: 64px;
      font-size: 0.75rem; }
      @media only screen and (max-width: 767px) {
        main .point-area p.notice {
          margin-top: 40px; } }
  main .step-area {
    background-color: #EBF6FF;
    text-align: center; }
    main .step-area .sub-area p {
      margin-bottom: 2em; }
      main .step-area .sub-area p strong {
        font-size: 1.125rem; }
        main .step-area .sub-area p strong span {
          font-size: 1.5rem;
          color: #E65535; }
    @media only screen and (max-width: 767px) {
      main .step-area .sub-area img {
        width: 96%;
        height: auto; } }
    main .step-area .sub-area img:nth-child(3) {
      margin-bottom: 40px; }
  main .qa-area {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 56px 0; }
    @media only screen and (max-width: 767px) {
      main .qa-area {
        padding-left: 4%;
        padding-right: 4%; } }
    main .qa-area dl {
      font-size: 1.125rem;
      padding: 32px 32px 24px 72px;
      border: 1px #888 solid;
      border-radius: 8px; }
      @media only screen and (max-width: 767px) {
        main .qa-area dl {
          padding: 32px 16px 24px 48px;
          font-size: 1rem; } }
      main .qa-area dl dt, main .qa-area dl dd {
        text-indent: -1.5em; }
        main .qa-area dl dt span, main .qa-area dl dd span {
          font-weight: 700;
          margin-right: 0.5em; }
      main .qa-area dl dt {
        color: #005490;
        font-weight: 700; }
      main .qa-area dl dd {
        margin-bottom: 1em; }
  main .notice-area {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 0.75rem; }
    @media only screen and (max-width: 767px) {
      main .notice-area {
        padding-left: 4%;
        padding-right: 4%; } }
    main .notice-area p {
      margin-top: 1em; }
    main .notice-area ul.mark {
      list-style: none;
      padding-left: 1.5em;
      margin-left: 0.5em; }
      main .notice-area ul.mark li {
        text-indent: -1.5em; }
        main .notice-area ul.mark li:before {
          content: "※";
          margin-right: 0.5em; }
    main .notice-area ul.disc {
      margin-left: 0.5em;
      padding-left: 1.5em; }
      main .notice-area ul.disc li {
        list-style: disc; }
  main .banner-area .banner {
    text-align: center;
    padding: 56px 0; }
    @media only screen and (max-width: 767px) {
      main .banner-area .banner {
        padding-left: 4%;
        padding-right: 4%; } }
    main .banner-area .banner p {
      font-size: 1.125rem;
      font-weight: 700; }
    main .banner-area .banner div {
      margin-top: 16px; }
      @media only screen and (max-width: 767px) {
        main .banner-area .banner div img {
          width: 100%;
          height: auto; } }

/*# sourceMappingURL=style.css.map */