@charset "UTF-8";
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-style: normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff; }

p a:hover {
  text-decoration: underline;
  color: #FF0004; }

.toshigas_top {
  width: 930px;
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  margin-left: auto;
  margin-right: auto; }

@media (max-width: 768px) {
  .toshigas_top {
    width: 100%;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    margin-left: auto;
    margin-right: auto; } }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px; }

@media (max-width: 767px) {
  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 6px;
    padding-left: 6px; } }

.toshigas_logo {
  width: 170px;
  margin-left: -10px;
  margin-top: 6px; }

@media (max-width: 768px) {
  .toshigas_logo {
    width: 100px;
    margin-left: -6px;
    margin-bottom: -8px;
    margin-top: 4px; } }

.toshigas_tel {
  width: 300px;
  margin-right: -10px;
  margin-top: 10px; }

@media (max-width: 768px) {
  .toshigas_tel {
    width: 170px;
    margin-right: -6px;
    margin-top: 0px; } }

.toshigas_mail {
  text-align: right;
  margin-top: 2px;
  margin-right: -10px;
  margin-bottom: -4px; }

@media (max-width: 768px) {
  .toshigas_mail {
    text-align: right;
    margin-top: 0px;
    margin-right: -6px;
    margin-bottom: -6px; } }

.toshigas_mail a {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #008B43;
  font-size: 18px;
  font-weight: bold; }

@media (max-width: 768px) {
  .toshigas_mail a {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #008B43;
    font-size: 12px;
    font-weight: bold; } }

img {
  max-width: 100%;
  vertical-align: bottom; }

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

.sp-none {
  display: none; }

@media screen and (min-width: 768px) {
  .pc-none {
    display: none; }
  .sp-none {
    display: block; } }

.hero {
  position: relative;
  background: url(../images/hero_background.png) no-repeat right 30% bottom;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15vh 0 25vh; }
  @media screen and (min-width: 768px) {
    .hero {
      background-position: center bottom;
      align-items: flex-start;
      height: 500px;
      padding: 54px 0 0; } }
  .hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    display: block;
    background: url(../images/hero_illust.png) no-repeat 0 0;
    background-size: 100% auto;
    width: 80%;
    max-width: 571px;
    height: 0;
    padding: 8.7%; }
    @media screen and (min-width: 768px) {
      .hero::after {
        background-size: 571px 124px;
        width: 571px;
        height: 124px;
        padding: 0; } }
  .hero__title {
    min-width: 200px;
    max-width: 300px; }
    @media screen and (min-width: 768px) {
      .hero__title {
        width: 516px;
        min-width: inherit;
        max-width: inherit; } }
  .hero img {
    display: block; }

.contents_wrap {
  text-align: center;
  padding: 3% 3% 80px;
  margin: 0 auto;
  background-color: #FFB945;
  border-top: 6px solid #FF8300; }
  @media screen and (min-width: 768px) {
    .contents_wrap {
      padding: 55px 0;
      margin: 0 auto; } }

.service {
  padding: 4% 7%;
  margin-bottom: 40px;
  border-radius: 20px;
  background-color: #fff; }
  @media screen and (min-width: 768px) {
    .service {
      width: 930px;
      margin: 0 auto 40px;
      padding: 40px 76px; } }
  .service__catchcopy {
    margin-bottom: 20px; }
  .service__diagram {
    margin-bottom: 40px; }
  .service__title {
    font-size: 3.8vw;
    font-weight: bold;
    padding: 0 0 16px 0;
    margin-bottom: 40px;
    border-bottom: 3px double #9CB647; }
  .service__contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    .service__contents li {
      width: 48%;
      min-width: 175px; }
      @media screen and (min-width: 768px) {
        .service__contents li {
          width: 227px; } }
      .service__contents li:not(:last-child) {
        margin-bottom: 20px; }
      @media screen and (min-width: 768px) {
        .service__contents li:nth-child(n+4) {
          margin-bottom: 0; } }

.comparison {
  margin-bottom: 40px; }
  .comparison__catchcopy {
    width: 80%;
    margin: 0 auto 20px; }
    @media screen and (min-width: 768px) {
      .comparison__catchcopy {
        width: 749px;
        margin-bottom: 30px; } }
  .comparison__table img {
    margin: 0 auto; }

.recommended {
  padding: 6% 7%;
  margin-bottom: 40px;
  border-radius: 20px;
  background-color: #fff; }
  @media screen and (min-width: 768px) {
    .recommended {
      width: 930px;
      margin: 0 auto 40px;
      padding: 70px 18px; } }
  .recommended__contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    @media screen and (min-width: 768px) {
      .recommended__contents {
        margin-top: -30px; } }
    .recommended__contents li {
      width: 48%;
      min-width: 175px; }
      @media screen and (min-width: 768px) {
        .recommended__contents li {
          width: 292px; } }
      .recommended__contents li:not(:last-child) {
        margin-bottom: 20px; }
      @media screen and (min-width: 768px) {
        .recommended__contents li:nth-child(n+4) {
          margin-bottom: 0; } }

.system {
  padding: 6% 7%;
  margin-bottom: 40px;
  border-radius: 20px;
  background-color: #EC9400; }
  @media screen and (min-width: 768px) {
    .system {
      width: 930px;
      padding: 25px 35px;
      margin: 0 auto 40px; } }
  .system__title {
    font-size: 4.5vw;
    font-weight: bold;
    color: #fff;
    margin-bottom: 16px; }
    @media screen and (min-width: 768px) {
      .system__title {
        font-size: 40px;
        margin-bottom: 20px; } }
  .system__content {
    padding: 5% 9%;
    border-radius: 20px;
    background-color: #fff; }
    @media screen and (min-width: 768px) {
      .system__content {
        padding: 35px 65px; } }
    .system__content:not(:last-child) {
      margin-bottom: 20px; }
  .system__header {
    margin-bottom: 20px; }
    @media screen and (min-width: 768px) {
      .system__header {
        margin-bottom: 30px; } }
  .system__contentHeader {
    font-size: 4vw;
    font-weight: bold;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #999999; }
    @media screen and (min-width: 768px) {
      .system__contentHeader {
        font-size: 35px; } }
  @media screen and (min-width: 768px) {
    .system__description {
      font-size: 16px; } }
  .system__image img {
    width: 100%; }

.flow {
  padding: 6% 7%;
  border-radius: 20px;
  background-color: #EC9400; }
  @media screen and (min-width: 768px) {
    .flow {
      width: 930px;
      padding: 25px 35px;
      margin: 0 auto 40px; } }
  .flow__title {
    font-size: 4.5vw;
    font-weight: bold;
    color: #fff;
    margin-bottom: 16px; }
    @media screen and (min-width: 768px) {
      .flow__title {
        font-size: 40px;
        margin-bottom: 20px; } }
  .flow__content {
    padding: 5% 9%;
    border-radius: 20px;
    background-color: #fff; }
    @media screen and (min-width: 768px) {
      .flow__content {
        padding: 35px 65px; } }
    .flow__content:not(:last-child) {
      margin-bottom: 20px; }
  .flow__header {
    margin-bottom: 20px; }
  .flow__contentHeader {
    font-size: 4vw;
    font-weight: bold;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #999999; }
    @media screen and (min-width: 768px) {
      .flow__contentHeader {
        font-size: 35px; } }
  .flow__image img {
    width: 100%; }
    @media screen and (min-width: 768px) {
  .flow__image img {
    width: 725px; }
    }

.footer {
  overflow: hidden;
  background-color: #575757; }
  .footer .address {
    text-align: center;
    padding: 19.462365591% 4% 17%;
    height: 0;
    position: relative; }
    @media screen and (min-width: 768px) {
      .footer .address {
        padding: 30px 0;
        height: auto;
        position: static; } }
    .footer .address img {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translate(-50%, 0);
      display: inline-block;
      width: 130%;
      max-width: inherit !important; }
      @media screen and (min-width: 768px) {
        .footer .address img {
          position: static;
          transform: translate(0, 0);
          width: 930px;
          margin: 0 auto; } }
  .footer .copyright {
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding: 12px;
    display: block;
    background-color: #312E2D; }
    @media screen and (min-width: 768px) {
      .footer .copyright {
        padding: 20px 0; } }