@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Ropa+Sans&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul, li {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

a,
button {
  text-decoration: none;
  -webkit-transition: opacity .4s ease , color .4s ease , background-color .4s ease;
  transition: opacity .4s ease , color .4s ease , background-color .4s ease;
  color: #221815; }
  a:hover,
  button:hover {
    opacity: .5; }
    @media (min-width: 1px) and (max-width: 1050px) {
      a:hover,
      button:hover {
        opacity: 1; } }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

img {
  max-width: 100%;
  height: auto; }
  @media screen and (max-width: 812px) {
    img {
      width: 100%; } }

table {
  width: 100%; }

input[type="text"],
input[type="email"],
textarea {
  -webkit-appearance: none;
  border: none;
  font-family: inherit; }

input[type="text"]:focus,
input[type="email"]:focus {
  outline: 0; }

::-webkit-input-placeholder {
  color: #cccccc; }

:-ms-input-placeholder {
  color: #cccccc; }

::-ms-input-placeholder {
  color: #cccccc; }

::placeholder {
  color: #cccccc; }

/* IE */
:-ms-input-placeholder {
  color: #cccccc; }

/* Edge */
::-ms-input-placeholder {
  color: #cccccc; }

/* ---------------------------------------
  html , body
-----------------------------------------*/
html {
  font-size: 62.5%;
  font-family: 'Noto Sans JP', sans-serif; }

body {
  padding-top: 56px;
  -webkit-text-size-adjust: 100%;
  overflow-x: auto;
  overflow-y: auto;
  color: #00344d;
  position: relative; }
  @media screen and (min-width: 813px) {
    body {
      min-width: 1200px; } }
  @media screen and (max-width: 812px) {
    body {
      padding-top: 60px;
      overflow-x: hidden; } }


/* ---------------------------------------
  .wrap
-----------------------------------------*/
.wrap {
  margin: 0 auto; }
  @media screen and (min-width: 813px) {
    .wrap {
      max-width: 1000px; } }
  @media screen and (max-width: 812px) {
    .wrap {
      width: 90vw; } }

/* ---------------------------------------
  .btn
-----------------------------------------*/
.btn a {
  width: 286px;
  height: 56px;
  border-radius: 3px;
  background-color: #db4500;
  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;
  -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1); }
  @media screen and (max-width: 812px) {
    .btn a {
      width: 100%;
      height: 11.467vw; } }
  .btn a span {
    letter-spacing: 1px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    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: 812px) {
      .btn a span {
        font-size: 3.467vw; } }
.btn.mail span::before {
  content: '';
  width: 19px;
  height: 16px;
  background: url(../img/icon_mail.png) no-repeat center/cover;
  display: inline-block;
  margin-right: 13px; }
  @media screen and (max-width: 812px) {
    .btn.mail span::before {
      width: 3.733vw;
      height: 3.2vw; } }

/* ---------------------------------------
  .bg
-----------------------------------------*/
.bg_blue {
  background: -webkit-gradient(linear, left top, right top, from(#4f9bed), to(#4fb1ed));
  background: linear-gradient(90deg, #4f9bed 0%, #4fb1ed 100%); }

.bg_gray {
  background-color: #f3f6fd; }

/* ---------------------------------------
  .ttl_sec
-----------------------------------------*/
.ttl_sec .eng {
  text-align: center;
  margin-bottom: 15px; }
  .ttl_sec .eng span {
    position: relative;
    font-family: 'Ropa Sans', sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
    color: #0096db;
    padding-bottom: 5px;
    letter-spacing: .15em; }
    @media screen and (max-width: 812px) {
      .ttl_sec .eng span {
        font-size: 3.136vw; } }
.ttl_sec .eng span::before{
  content: "";
  width: 46px;
  height: 2px;
  background-color: #0096db;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
}
.ttl_sec .ja {
  text-align: center;
  font-size: 3.0rem;
  font-weight: bold;
  color: #0096db;
  letter-spacing: .15em; }
  @media screen and (max-width: 812px) {
    .ttl_sec .ja {
      line-height: 1.6;
      font-size: 5.6vw; } }


/* ---------------------------------------
  header
-----------------------------------------*/


.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#overlay {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 997;
}
#overlay.active {
  opacity: 1;
  pointer-events: auto;
}

header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 5px 0;
  background-color: #FFF;
  box-shadow: 0 3px 2px rgba(0,0,0,0.15);
  z-index: 99;
}
header nav{
  width: 1000px;
  margin: 0 auto;
}
header .flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header nav > .flex{
  justify-content: space-between;
}
header nav ul li.logo{
  margin-right: 15px;
}
header nav ul li{
  margin-right: 30px;
}
header nav ul li:last-of-type{
  margin-right: 0;
}
header nav ul li a{
  font-size: 1.5rem;
  color: #00344d;
  font-weight: bold;
  letter-spacing: 1px;
}
header nav .link_wrap .tell_box .tell{
  text-align: center;
}
header nav .link_wrap .tell_box .tell a{
  font-weight: bold;
  color: #00344d;
  font-size: 2.6rem;
  pointer-events: none;
}
header nav .link_wrap .tell_box .tell a::before{
  content: "";
  background-image: url("../img/icon_tel.png");
  width: 23px;
  height: 23px;
  display: inline-block;
  vertical-align: bottom;
}
header nav .link_wrap .tell_box .tell span{
  display: block;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 3px;
  margin-left: 3px;
}
header nav .link_wrap .btn{
  margin-left: 10px;
}
header nav .link_wrap .btn a{
  width: 150px;
  height: 46px;
  letter-spacing: 1px;
  box-shadow: none;
}
header nav .link_wrap .btn span::before{
  background-image: url("../img/icon_header_mail.png");
  width: 20px;
  height: 15px;
  margin-right: 5px;
}


@media screen and (max-width: 812px) {

  header{
    padding: 0;
    box-shadow: none;
  }
  header .menu-trigger {
    display: block;
    position: fixed;
    top: 15px;
    right: 5vw;
    width: 30px;
    height: 30px;
    z-index: 999;
  }

  header .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
  }

  header .menu-trigger span:nth-of-type(1) {
    top: 15%;
  }

  header .menu-trigger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  header .menu-trigger span:nth-of-type(3) {
    bottom: 15%;
  }

  header.navOpen .menu-trigger span:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  header.navOpen .menu-trigger span:nth-of-type(2) {
    opacity: 0;
  }

  header.navOpen .menu-trigger span:nth-of-type(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(45deg);
  }

  header nav {
    width: 100%;
    opacity: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform .3s, opacity 1s;
    background-color: #FFF;
    z-index: 998;
  }

  header.navOpen nav {
    opacity: 1;
    transform: translateY(0);
    transition: transform .3s, opacity 0s;
  }

  header .flex{
    display: block;
  }
  header .logo_wrap{
    padding: 10px 15px;
    box-shadow: 0 3px 2px rgba(0,0,0,0.15);
  }
  header .logo img{
    width: auto;
  }
  header nav ul li{
    margin-top: 20px;
  }
  header nav ul li.logo{
    margin: 0 auto 30px;
  }
  header nav ul li a{
    font-size: 1.8rem;
  }
  header .nav_wrap{
    padding: 10px 20px;
  }
  header .nav_wrap .link_wrap{
    text-align: center;
    margin: 30px auto 0;
    border-top: 1px solid rgba(0,0,0,0.15);
    padding: 30px;
  }
  header nav .link_wrap .btn{
    margin: 15px auto 0;
  }
  header nav .link_wrap .btn a{
    margin: 10px auto 0;
  }
  header nav .link_wrap .tell_box .tell a{
    pointer-events: auto;
  }
}

/* ---------------------------------------
  #mv
-----------------------------------------*/
#mv {
  position: relative; }
  #mv::before {
    content: '';
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#faffff), to(#93c2f5));
    background: linear-gradient(90deg, #faffff 0%, #93c2f5 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .16; }
    @media screen and (max-width: 812px) {
      #mv::before {
        background: -webkit-gradient(linear, left bottom, left top, from(#faffff), to(#93c2f5));
        background: linear-gradient(0deg, #faffff 0%, #93c2f5 100%); } }
  @media screen and (min-width: 813px) {
    #mv {
      height: 647px; } }
  @media screen and (max-width: 812px) {
    #mv {
      padding: 20px 0 45px; } }
  #mv .wrap {
    position: relative; }
    @media screen and (min-width: 813px) {
      #mv .wrap .ttl {
        position: absolute;
        left: 0;
        top: 20px;
        width: 1116px; } }
    @media screen and (min-width: 813px) {
      #mv .wrap .btn {
        position: absolute;
        left: 0;
        top: 480px; } }

/* ---------------------------------------
  #sec01
-----------------------------------------*/
#sec01 {
  padding: 23px 0 34px; }
  @media screen and (min-width: 813px) {
    #sec01 .list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }
  @media screen and (max-width: 812px) {
    #sec01 .list {
      width: 74.133vw;
      margin: 0 auto; } }
  @media screen and (max-width: 812px) {
    #sec01 .list li:nth-child(n+2) {
      margin-top: 25px; } }

/* ---------------------------------------
  #sec02
-----------------------------------------*/
#sec02 {
  padding: 81px 0 61px; }
  @media screen and (max-width: 812px) {
    #sec02 {
      padding: 40px 0 30px; } }
  #sec02 .ttl {
    font-size: 3.0rem;
    font-weight: bold;
    letter-spacing: .15em;
    text-align: center; }
    @media screen and (max-width: 812px) {
      #sec02 .ttl {
        font-size: 6vw;
        line-height: 1.2; } }
  #sec02 .list {
    margin-top: 42px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    @media screen and (max-width: 812px) {
      #sec02 .list {
        margin-top: 20px; } }
    #sec02 .list .clm {
      width: 306px;
      height: 105px;
      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;
      position: relative;
      border-radius: 10px;
      background-color: #fff;
      -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.14);
              box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.14); }
      @media screen and (max-width: 812px) {
        #sec02 .list .clm {
          width: 48%;
          height: auto;
          padding: 5vw 0 3vw; } }
      #sec02 .list .clm::before {
        content: '';
        width: 41px;
        height: 40px;
        background: url(../img/icon_check.png) no-repeat center/cover;
        position: absolute;
        top: -14px;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
        @media screen and (max-width: 812px) {
          #sec02 .list .clm::before {
            width: 6vw;
            height: 6vw;
            top: -3vw; } }
      @media screen and (min-width: 813px) {
        #sec02 .list .clm:nth-of-type(n+3) {
          margin-top: 30px; } }
      @media screen and (max-width: 812px) {
        #sec02 .list .clm:nth-of-type(n+2) {
          margin-top: 8vw; } }
      @media screen and (min-width: 813px) {
        #sec02 .list .clm.small {
          width: 281px;
          height: 96px; }
          #sec02 .list .clm.small::before {
            top: -23px; } }
      #sec02 .list .clm p {
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: .11em;
        text-align: center;
        padding-top: 15px; }
        @media screen and (max-width: 812px) {
          #sec02 .list .clm p {
            font-size: 2.6vw;
            padding-top: 0; } }
        #sec02 .list .clm p span {
          font-size: 2.0rem;
          color: #0096db; }
          @media screen and (max-width: 812px) {
            #sec02 .list .clm p span {
              font-size: 2.8vw; } }
  #sec02 .img {
    text-align: center;
    margin-top: 17px; }
    @media screen and (max-width: 812px) {
      #sec02 .img {
        margin-top: 30px; } }
    @media screen and (max-width: 812px) {
      #sec02 .img img {
        width: 80vw; } }

/* ---------------------------------------
  #about
-----------------------------------------*/
#about {
  padding: 100px 0;
  position: relative; }
  @media screen and (max-width: 812px) {
    #about {
      padding: 50px 0; } }
  #about::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 48px 73px 0 73px;
    border-color: #f3f6fd transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    @media screen and (max-width: 812px) {
      #about::before {
        border-width: 6.4vw 9.733vw 0 9.733vw; } }
  #about .catch {
    text-align: center; }
    #about .catch span {
      font-size: 4.0rem;
      font-weight: bold;
      color: #fff;
      position: relative;
      padding: 0 25px 11px; }
      @media screen and (max-width: 812px) {
        #about .catch span {
          font-size: 7.485vw;
          padding: 0 5vw 1vw; } }
      #about .catch span::before, #about .catch span::after {
        content: '';
        width: 3px;
        height: 64px;
        background-color: #fff;
        position: absolute;
        bottom: 0; }
        @media screen and (max-width: 812px) {
          #about .catch span::before, #about .catch span::after {
            height: 11.6vw;
            width: 2px; } }
      #about .catch span::before {
        -webkit-transform: rotate(-25deg);
                transform: rotate(-25deg);
        left: 0; }
      #about .catch span::after {
        -webkit-transform: rotate(25deg);
                transform: rotate(25deg);
        right: 0; }
  #about .content {
    margin: 48px auto 0;
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.14);
            box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.14);
    padding: 40px 0; }
    @media screen and (min-width: 813px) {
      #about .content {
        width: 940px; } }
    @media screen and (max-width: 812px) {
      #about .content {
        margin-top: 6vw;
        padding: 5.867vw 4vw 4.267vw; } }
    #about .content .txt {
      font-size: 1.5rem;
      font-weight: bold;
      margin-top: 40px;
      text-align: center;
      line-height: 1.5; }
      @media screen and (max-width: 812px) {
        #about .content .txt {
          font-size: 3.333vw;
          margin-top: 7.6vw; } }
    #about .content .img {
      text-align: center;
      margin-top: 40px; }
      @media screen and (max-width: 812px) {
        #about .content .img {
          margin-top: 2.933vw; } }

/* ---------------------------------------
  #point
-----------------------------------------*/
#point {
  padding: 100px 0; }
  @media screen and (max-width: 812px) {
    #point {
      padding: 50px 0; } }
  @media screen and (min-width: 813px) {
    #point .wrap {
      width: 766px; } }
  #point .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    @media screen and (min-width: 813px) {
      #point .content:nth-child(odd) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse; } }
    @media screen and (max-width: 812px) {
      #point .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column; } }
    #point .content:nth-of-type(n+2) {
      margin-top: 100px; }
      @media screen and (max-width: 812px) {
        #point .content:nth-of-type(n+2) {
          margin-top: 50px; } }
    @media screen and (min-width: 813px) {
      #point .content .txt_box {
        width: 361px; } }
    #point .content .txt_box .point {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 1.9rem;
      font-weight: bold;
      color: #0096db; }
      @media screen and (max-width: 812px) {
        #point .content .txt_box .point {
          font-size: 3.5vw; } }
      #point .content .txt_box .point .number {
        font-size: 2.6rem;
        margin-left: 5px; }
        @media screen and (max-width: 812px) {
          #point .content .txt_box .point .number {
            font-size: 4.5vw; } }
    #point .content .txt_box .ttl {
      color: #0096db;
      font-size: 3.4rem;
      font-weight: bold;
      line-height: 1.5;
      margin-top: 5px; }
      @media screen and (max-width: 812px) {
        #point .content .txt_box .ttl {
          font-size: 6vw; } }
    #point .content .txt_box .txt {
      font-size: 1.5rem;
      line-height: 1.5;
      margin-top: 20px; }
      @media screen and (max-width: 812px) {
        #point .content .txt_box .txt {
          margin-top: 10px; } }
    @media screen and (max-width: 812px) {
      #point .content .img {
        margin-top: 15px;
        text-align: center; }
        #point .content .img img {
          width: 50vw; } }

/* ---------------------------------------
  #service
-----------------------------------------*/
#service {
  padding: 100px 0; }
  @media screen and (max-width: 812px) {
    #service {
      padding: 50px 0; } }
  #service .caption {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 46px; }
    @media screen and (max-width: 812px) {
      #service .caption {
        font-size: 3.5vw;
        margin-top: 25px; } }
  #service .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 46px; }
    @media screen and (max-width: 812px) {
      #service .list {
        margin-top: 25px; } }
    #service .list li {
      width: 235px;
      height: 81px;
      background-color: #0096db;
      border-radius: 10px;
      -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.14);
              box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.14);
      color: #fff;
      font-size: 1.6rem;
      line-height: 1.5;
      margin-right: 20px;
      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;
      text-align: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
      #service .list li .small {
        font-size: 1.4rem; }
        @media screen and (max-width: 812px) {
          #service .list li .small {
            font-size: 2vw; } }
      @media screen and (min-width: 813px) {
        #service .list li:nth-of-type(4n) {
          margin-right: 0; }
        #service .list li:nth-of-type(n+5) {
          margin-top: 22px; } }
      @media screen and (max-width: 812px) {
        #service .list li {
          width: 48%;
          height: 20vw;
          font-size: 3.5vw;
          margin-right: 2%; }
          #service .list li:nth-of-type(2n) {
            margin-right: 0; }
          #service .list li:nth-of-type(n+3) {
            margin-top: 2%; } }
  #service .txt {
    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 45px; }
    @media screen and (max-width: 812px) {
      #service .txt {
        font-size: 4vw;
        margin-top: 25px; } }
    #service .txt span {
      color: #0096db; }


/* ---------------------------------------
  .contact
-----------------------------------------*/
.contact{
  padding: 35px;
}
.contact .wrap{
  position: relative;
  padding: 0 70px;
}
.contact .txt{
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #FFF;
  margin-top: 20px;
}
.contact .btn{
  margin-top: 25px;
}
.contact .img{
  position: absolute;
  bottom: -20px;
  right: 40px;
}

@media screen and (max-width: 812px) {
  .contact{
    padding: 15px;
  }
  .contact .wrap{
    padding: 0;
  }
  .contact .txt{
    margin-top: 0;
    font-size: 1.35rem;
  }
  .contact .img{
    bottom: 60px;
    right: 0px;
  }
  .contact .img img{
    width: 140px;
  }
  .contact .btn {
    margin-top: 15px;
  }
}

/* ---------------------------------------
  #plan
-----------------------------------------*/

#plan{
  background-image: url("../img/bg_plan.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 60px 0;
}
#plan .txt_wrap{
  margin-top: 20px;
  position: relative;
}
#plan .txt_wrap::before{
  content: "";
  width: 364px;
  height: 4px;
  background-color: #00344d;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#plan .txt_wrap > .flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
#plan .txt_wrap .vertical{
  font-size: 3rem;
  color: #FFF;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  background-color: #00344d;
  border-radius: 6px;
  font-weight: bold;
  padding: 14px;
  letter-spacing: 5px;
  margin-right: 10px;
}
#plan .txt_wrap .flex > .txt{
  font-size: 5rem;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 4px;
}
#plan .txt_wrap .txt span{
  font-size: 13rem;
  vertical-align: text-bottom;
}
@media all and (-ms-high-contrast: none) {
  #plan .txt_wrap .txt span {
    vertical-align: baseline;
  }
}

#plan .txt_wrap .txt span.mark{
  font-size: 1.2rem;
  vertical-align: sub;
}
#plan .wrap > .txt{
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 35px;
}
#plan .wrap > .txt span{
  color: #0096db;
}
#plan .wrap .caution{
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 20px;
}

@media screen and (max-width: 812px) {

  #plan{
    padding: 50px 0;
  }
  #plan .txt_wrap .txt span{
    font-size: 9rem;
  }
  #plan .txt_wrap .flex > .txt {
    font-size: 3.5rem;
  }
  #plan .txt_wrap .vertical{
    padding: 12px;
    font-size: 2rem;
  }
  #plan .txt_wrap::before{
    width: 252px;
  }
  #plan .wrap > .txt{
    font-size: 1.6rem;
  }
  #plan .wrap .caution{
    line-height: 1.6;
  }

}




/* ---------------------------------------
  #comparison
-----------------------------------------*/

#comparison{
  padding: 100px 0;
}
#comparison .data_wrap{
  margin-top: 60px;
  position: relative;
}
#comparison .data_wrap::before{
  content: "";
  width: 273px;
  height: 662px;
  border: 2px solid #fcee21;
  position: absolute;
  top: -2px;
  left: 185px;
}
#comparison .data_wrap dl{
  display: flex;
  align-items: center;
  width: 100%;
}
#comparison .data_wrap dl:first-of-type dt{
  min-height: 50px;
}
@media all and (-ms-high-contrast: none) {

  #comparison .data_wrap dl:first-of-type dt{
    padding: 15px 0;
  }

}

#comparison .data_wrap dl:first-of-type dt:first-of-type{
  background-color: transparent;
}
#comparison .data_wrap dl:first-of-type dt:not(:first-of-type){
  width: calc( 100% / 3 );
}

#comparison .data_wrap dl dt:nth-of-type(3),
#comparison .data_wrap dl dt:last-of-type{
  border-left: 2px solid #e6e6e6;
}
#comparison .data_wrap dl dd:not(:first-of-type){
  border-left: 2px solid #e6e6e6;
}
#comparison .data_wrap dl + dl{
  border-top: 2px solid #e6e6e6;
}
#comparison .data_wrap dl:nth-of-type(2){
  border: none;
}
#comparison .data_wrap dl:not(:first-of-type) dt{
  background: linear-gradient(-90deg, #4f9bed 0%, #4fb1ed 100%);
}
@media all and (-ms-high-contrast: none) {

  #comparison .data_wrap dl:not(:first-of-type) dt{
    padding: 40px 0;
  }

}
#comparison .data_wrap dl dt{
  min-width: 185px;
  min-height: 100px;
  font-size: 1.9rem;
  font-weight: bold;
  color: #FFF;
  background-color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}
#comparison .data_wrap dl dd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: bold;
  width: calc( 100% / 3 );
  min-height: 100px;
  text-align: center;
  color: #4d4d4d;
  background-color: #FFF;
  line-height: 1.5;
  box-sizing: border-box;
}
@media all and (-ms-high-contrast: none) {
  #comparison .data_wrap dl dd{
    height: 100px;
  }

}
#comparison .data_wrap dl dt,
#comparison .data_wrap dl dd{
  letter-spacing: 1px;
}
#comparison .data_wrap dl dd.txt_blue{
  color: #0096db;
}
#comparison .data_wrap dl dd span{
  font-size: 2.9rem;
}
#comparison .data_wrap dl dd span.caution{
  font-size: 1.3rem;
}
#comparison .data_wrap dl dd span.br{
  display: block;
}
#comparison .data_wrap dl:last-of-type dd:first-of-type{
  line-height: 1.3;
}

@media screen and (max-width: 812px) {
  #comparison{
    padding: 50px 0;
  }
  #comparison .data_wrap dl{
    align-items: stretch;
  }

  #comparison .data_wrap dl dt{
    min-width: auto;
    font-size: 1.3rem;
  }
  #comparison .data_wrap dl dd{
    font-size: 1.2rem;
    min-height: 60px;
    letter-spacing: 0;
    padding: 10px 0;
  }
  #comparison .data_wrap dl:first-of-type dt:first-of-type{
    display: none;
  }
  #comparison .data_wrap dl:not(:first-of-type){
    flex-wrap: wrap;
    margin-top: 5px;
  }
  #comparison .data_wrap dl:not(:first-of-type) dt{
    width: 100%;
    min-height: 33px;
  }
  #comparison .data_wrap dl dd:nth-of-type(2),
  #comparison .data_wrap dl dt:nth-of-type(3){
    border-left: none;
  }
  #comparison .data_wrap dl dd span{
    font-size: 1.9rem;
  }
  #comparison .data_wrap dl dd span.caution{
    font-size: 0.8rem;
  }
  #comparison .data_wrap::before{
    content: none;
  }
  #comparison .data_wrap dl:first-of-type dt.bg_blue,
  #comparison .data_wrap dl:not(:first-of-type) dd:first-of-type{
    position: relative;
  }
  #comparison .data_wrap dl:not(:first-of-type) dd:first-of-type::before{
    content: "";
    width: 102%;
    height: 102%;
    border: 2px solid #fcee21;
    position: absolute;
    top: 0;
    left: 0;
  }
  #comparison .data_wrap dl:first-of-type dt.bg_blue::before{
    content: "";
    width: 102%;
    height: 108%;
    border: 2px solid #fcee21;
    position: absolute;
    top: -2px;
    left: 0;
  }
}


/* ---------------------------------------
  #voice
-----------------------------------------*/


#voice{
  padding: 100px 0;
}

#voice .flex{
  display: flex;
}

#voice figure{
  width: 340px;
}
#voice figcaption{
  background-color: #0096db;
  color: #FFF;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
  position: relative;
  padding: 5px 0 5px 40px;
  margin-top: 10px;
  letter-spacing: 1px;
}
#voice figcaption::before{
  content: "";
  background-image: url("../img/icon_voice.png");
  background-size: contain;
  width: 21px;
  height: 18px;
  position: absolute;
  top: 10px;
  left: 10px;
}
#voice .txt_wrap{
  width: 495px;
  margin-left: 45px;
}
#voice .txt_wrap .intro{
  font-size: 2.4rem;
  color: #0096db;
  font-weight: bold;
  letter-spacing: 2px;
}
#voice .txt_wrap .txt{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  margin-top: 20px;
}
#voice .txt_box{
  padding: 45px;
  border: 2px solid #0096db;
  margin-top: 60px;
}
#voice .txt_box + .txt_box{
  margin-top: 30px;
}

@media screen and (max-width: 812px) {

  #voice{
    padding: 50px 0;
  }

  #voice .flex{
    display: block;
  }
  #voice .txt_box{
    padding: 20px;
  }
  #voice figure{
    width: 100%;
  }
  #voice .txt_wrap{
    width: 100%;
    margin: 30px auto 0;
  }
  #voice .txt_wrap .intro{
    font-size: 2rem;
    letter-spacing: 1px;
  }
  #voice .txt_wrap .txt{
    margin-top: 15px;
  }
}



/* ---------------------------------------
  #q&a
-----------------------------------------*/

#qa{
  padding: 100px 0;
}
#qa .qa_list{
  margin-top: 80px;
}
#qa .qa_list dl{
  background-color: #FFF;
  border-radius: 10px;
  padding: 35px 35px 25px;
  box-shadow: 4px 4px rgba(0,0,0,0.14);
  margin-top: 40px;
}
#qa .qa_list dl dt{
  font-size: 1.9rem;
  color: #0096db;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
  padding-left: 50px;
}
#qa .qa_list dl dt::before,
#qa .qa_list dl dd::before{
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/img_qa02.png");
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: -5px;
}
#qa .qa_list dl dt::before{
  background-image: url("../img/img_qa02.png");
}
#qa .qa_list dl dd::before{
  background-image: url("../img/img_qa01.png");
}
#qa .qa_list dl dd{
  margin-top: 30px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.7;
  padding-left: 50px;
  position: relative;
}

#qa .txt{
  font-size: 2.2rem;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 812px) {

  #qa{
    padding: 50px 0;
  }
  #qa .qa_list {
     margin-top: 0;
  }
  #qa .qa_list dl dt{
    line-height: 1.5;
  }
  #qa .qa_list dl dt::before{
    top: 0;
  }
  #qa .qa_list dl dd{
    margin-top: 15px;
  }
  #qa .txt{
    font-size: 1.6rem;
    line-height: 1.6;
  }
}

/* ---------------------------------------
  #flow
-----------------------------------------*/
#flow{
  padding: 100px 0;
}
#flow .flow_wrap{
  margin-top: 80px;
}
#flow .flow_wrap .flex{
  display: flex;
  justify-content: space-between;
}
#flow .flow_wrap .flex li{
  width: 205px;
  position: relative;
}
#flow .flow_wrap .flex li .flow_ttl{
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #0096db;
  text-align: center;
  margin-top: 15px;
}
#flow .flow_wrap .flex li .txt{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  margin-top: 15px;
}
#flow .flow_wrap .flex li:not(:last-of-type)::before{
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/icon_arrow.png");
  width: 30px;
  height: 49px;
  position: absolute;
  right: -45px;
  top: 80px;
}
@media screen and (max-width: 812px) {

  #flow{
    padding: 50px 0;
  }
  #flow .flow_wrap .flex{
    display: block;
  }
  #flow .flow_wrap .flex li{
    margin: 0 auto 90px;
  }
  #flow .flow_wrap .flex li:last-of-type{
    margin: 0 auto;
  }
  #flow .flow_wrap .flex li:not(:last-of-type)::before{
    right: auto;
    top: auto;
    left: 50%;
    bottom: -65px;
    transform: translateX(-50%) rotate(90deg);
  }

}

/* ---------------------------------------
  #online
-----------------------------------------*/

#online{
  padding: 100px 0;
}
#online .txt_box{
  width: 796px;
  margin: 80px auto 0;
  background-color: #FFF;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(0,0,0,0.14);
}
#online .txt_box .flex{
  display: flex;
  justify-content: center;
}
#online .txt_box .flex li + li{
  margin-left: 100px;
  position: relative;
}
#online .txt_box .flex li + li::before{
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/icon_arrow.png");
  width: 30px;
  height: 49px;
  position: absolute;
  left: -60px;
  top: 80px;
}
#online .txt_box .txt{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.8;
  margin-top: 30px;
}
#online .wrap > .txt{
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: center;
  margin-top: 40px;
}

@media screen and (max-width: 812px) {

  #online{
    padding: 50px 0;
  }
  #online .txt_box{
    padding: 25px;
    width: 100%;
    margin: 40px auto 0;
  }
  #online .txt_box .flex{
    display: block;
  }
  #online .txt_box .flex li{
    text-align: center;
  }
  #online .txt_box .flex li img{
    width: auto;
  }
  #online .txt_box .flex li + li{
    margin: 80px auto 0;
  }
  #online .txt_box .flex li + li::before{
    left: 50%;
    top: -60px;
    transform: translateX(-50%) rotate(90deg);
  }
  #online .wrap > .txt{
    font-size: 1.6rem;
  }
}

/* ---------------------------------------
  #message
-----------------------------------------*/
#message{
  padding: 100px 0;
  background-image: url("../img/bg_plan.png");
  background-color: #FFF;
}
#message .txt_box{
  margin: 30px auto 0;
  background-color: #f3f6fd;
  box-shadow: 4px 4px rgba(0,0,0,0.14);
  border-radius: 10px;
  width: 796px;
  height: 251px;
  padding: 25px 56px;
}
#message .txt_box .txt{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2.7;
  text-align: center;
}
#message .txt_box .txt span{
  position: relative;
  display: block;
}
#message .txt_box .txt span::before{
  content: "";
  width: 100%;
  height: 2px;
  background-image: url("../img/message_line.png");
  position: absolute;
  left: 0;
  bottom: 2px;
}

@media screen and (max-width: 812px) {
  #message{
    padding: 50px 0;
  }
  #message .txt_box{
    width: 100%;
    height: auto;
    padding: 25px;
  }
  #message .txt_box .txt{
    font-size: 1.4rem;
  }
}

/* ---------------------------------------
  #form
-----------------------------------------*/

#form{
  padding: 100px 0;
}
#form .ttl_sec + .txt{
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin: 40px auto;
  letter-spacing: 1px;
  line-height: 1.6;
}
#form .thanks_text{
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 80px auto 0;
}
#form .btn.back{
  margin: 80px auto 0;
}
#form .btn.back a{
  border: 1px solid #db4500;
  margin: 0 auto;
  background-color: #FFF;
}
#form .btn.back a span{
  color: #db4500;
}
.confirm #form .form_wrap{
  margin: 80px auto 0;
}
#form .form_wrap{
  width: 850px;
  margin: 0 auto;
}
.confirm #form dl dt{
  line-height: 1.6;
}
#form .form_wrap dl dt{
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
  padding-left: 15px;
}
#form .form_wrap dl dt::before{
  content: "";
  width: 4px;
  height: 45px;
  background-color: #0096db;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#form .form_wrap dl dt span{
  font-size: 1.1rem;
  display: inline-block;
  background-color: #db4500;
  color: #FFF;
  margin-left: 5px;
  padding: 6px;
}


#form .form_wrap dl > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
#form .form_wrap dl dd{
  width: 640px;
  height: 45px;
}
.confirm #form dl dd{
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.6;
  height: auto;
}
#form .form_wrap dl div:last-of-type{
  align-items: flex-start;
}
#form .form_wrap dl div:last-of-type dt{
  margin-top: 15px;
}
.confirm #form dl div:last-of-type dt{
  margin-top: 0;
}
#form .form_wrap dl div:last-of-type dd{
  height: 160px;
}
#form .form_wrap dl dd textarea{
  width: 100%;
  height: 100%;
  resize: none;
  padding: 10px 20px;
}
.confirm #form dl div:last-of-type dd{
  height: auto;
}
#form .form_wrap dl dd input{
  width: 100%;
  height: 100%;
  padding: 0 20px;
}
#form .form_wrap dl dd input::placeholder{
  letter-spacing: 1px;
}
#form .form_wrap dl dd .radio_wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
#form .form_wrap dl dd .radio_wrap .radio{
  margin-right: 50px;
}

#form .form_wrap dl dd .radio_wrap .radio label {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  font-size: 1.5rem;
  font-weight: bold;
}

#form .form_wrap dl dd .radio_wrap .radio label::before,
#form .form_wrap dl dd .radio_wrap .radio label::after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

#form .form_wrap dl dd .radio_wrap .radio label::before {
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  left: 5px;
}

#form .form_wrap dl dd .radio_wrap .radio label::after {
  background-color: #b3b3b3;
  border-radius: 50%;
  opacity: 0;
  width: 7px;
  height: 7px;
  left: 8px;
}

#form .form_wrap dl dd .radio_wrap .radio input:checked + label::after {
  opacity: 1;
}

#form .form_wrap dl dd .radio_wrap .radio input {
  position: absolute;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
}

#form .personal_info{
  height: 155px;
  overflow-y: scroll;
  background-color: #FFF;
  padding: 20px 0;
}
#form .personal_info p{
  width: 690px;
  margin: 0 auto 20px;
  font-size: 1.5rem;
  color: #4d4d4d;
  line-height: 1.6;
}
#form .personal_info .ttl{
  text-align: center;
  margin-bottom: 15px;
  letter-spacing: 1px;
}
#form .check_box{
  text-align: center;
}
#form .check_box .txt{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 1px;
  margin-top: 35px;
}
/* チェックボックス01 */
#form .check_box input[type=checkbox] {
  visibility: hidden;
  width: 1px;
}
#form .check_box label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 0 5px 30px;
  position: relative;
  width: auto;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 1px;
  margin-top: 30px;
}
#form .check_box label::before {
  background: #fff;
  border: 1px solid #b3b3b3;
  content: '';
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 16px;
}
#form .check_box label::after {
  border-right: 2px solid #4d4d4d;
  border-bottom: 2px solid #4d4d4d;
  content: '';
  display: block;
  height: 10px;
  left: 10px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(35deg);
  width: 6px;
}
#form .check_box input[type=checkbox]:checked + label::after {
  opacity: 1;
}

#form form input[type="submit"]{
  width: 284px;
  height: 56px;
  display: block;
  margin: 30px auto 0;
  background-color: #db4500;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  resize: none;
  outline: none;
  color: #FFF;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 3px;
  box-shadow: 4px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: .3s;
}
#form form input[type="submit"]:hover{
  opacity: .6;
}
.confirm #form form input[type="submit"]{
  margin: 80px auto 0;
}

@media screen and (max-width: 812px) {

  #form{
    padding: 50px 0;
  }
  #form .form_wrap{
    width: 100%;
  }
  #form .form_wrap dl > div{
    display: block;
  }
  #form .form_wrap dl dd{
    width: 100%;
    margin-top: 20px;
  }
  #form .form_wrap dl dt::before{
    height: 35px;
  }
  #form .form_wrap dl dd .radio_wrap{
    display: block;
    margin-top: 30px;
  }
  #form .form_wrap dl dd .radio_wrap .radio{
    margin-right: 0;
    margin-top: 10px;
  }
  #form .form_wrap dl div:last-of-type dt {
    margin-top: 60px;
  }
  #form .personal_info p{
    font-size: 1.3rem;
    width: 90%;
    margin: 0 auto 10px;
  }
  #form .form_wrap dl dd .radio_wrap .radio label::before,
  #form .form_wrap dl dd .radio_wrap .radio label::after{
    top: 55%;
  }
  #form .btn.back a {
    width: 284px;
    height: 56px;
  }
  #form .btn.back a span{
    font-size: 1.6rem;
  }

}








footer{
  background-color: #262f38;
  padding: 24px 0;
}
footer .flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer a,
footer small{
  font-size: 1.2rem;
  color: #FFF;
  letter-spacing: 1px;
}
.confirm #form,
.thanks #form{
  padding: 100px 0 160px;
  box-sizing: border-box;
  min-height: 100vh;
}
.confirm footer,
.thanks footer{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.confirm header .logo_wrap,
.thanks header .logo_wrap{
  width: 1000px;
  margin: 0 auto;
}
.confirm #form .btn_wrap{
  display: flex;
  align-items: center;
}

@media screen and (max-width: 812px) {

  footer .flex{
    display: block;
  }
  footer small{
    margin-top: 20px;
    display: block;
  }
  .confirm #form,
  .thanks #form{
    padding: 50px 0 130px;
  }
  .confirm #form .form_wrap {
    margin: 50px auto 0;
  }
  .confirm #form form input[type="submit"]{
    margin: 30px auto 0;
  }
  .confirm #form .btn_wrap{
    display: block;
  }
}

/* ---------------------------------------
  表示・非表示処理
-----------------------------------------*/
.sp {
  display: none; }
  @media screen and (max-width: 812px) {
    .sp {
      display: block; } }

@media screen and (max-width: 812px) {
  .pc {
    display: none; } }


/* ---------------------------------------
  エラー
-----------------------------------------*/
#form .check_box{
  position: relative;
}
#form .check_box .formError{
  position: absolute;
  left: 50%;
  top: 55px;
  transform: translateX(-50%);
}
@media screen and (max-width: 812px) {


}