@charset "utf-8";

/*___________スマホ用CSS_____________*/
@media print, screen and (max-width: 767px) {
  /*ウィンドウ幅が最大767pxまでの場合に適用*/

  body,
  html {
    overflow-x: hidden;
  }

  body {
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2em;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  img {
    vertical-align: bottom;
    height: auto;
  }
  a img {
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
  }
  a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
  }

  #content_wrapper {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }
  #content_wrapper img {
    width: 100%;
    height: auto;
  }

  /*FV*/
  #fv {
    position: relative;
    width: 100%;
    margin-bottom: 6.667vw;
  }
  #fv h1 {
    position: absolute;
    top: 8%;
    left: 4.3%;
    color: #001c7e;
    font-size: 8vw;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    white-space: nowrap;
    font-feature-settings: "palt";
  }
  #fv h1 span {
    font-size: 6.667vw;
  }
  #fv .head_copy {
    position: absolute;
    top: 29%;
    left: 4.3%;
    color: #001c7e;
    font-weight: 700;
    font-size: 4.4vw;
    line-height: 1.4;
  }
  #fv .fv__cta {
    position: absolute;
    top: 77%;
    right: 4.3%;
    width: 50%;
  }
  #fv .fv__cta a.sign {
    display: block;
    width: 100%;
    height: 11vw;
    background-color: #000;
    border-radius: 1.733vw;
    text-decoration: none;
    text-align: center;
    line-height: 11vw;
    color: #fff;
    font-size: 4.4vw;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 6%;
  }
  #fv .fv__cta a.contact {
    display: block;
    width: 100%;
    height: 11vw;
    background-color: #9e9e9e;
    border-radius: 1.733vw;
    text-decoration: none;
    text-align: center;
    line-height: 11vw;
    color: #fff;
    font-size: 4.4vw;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  #fv .fv__cta a:hover {
    opacity: 0.7;
  }
  #fv a.login {
    display: block;
    position: absolute;
    top: 0.5%;
    right: 5%;
    font-size: 3.6vw;
  }

  /*現場で、こんな課題はありませんか？*/
  #issue h2 {
    height: 10.667vw;
    width: 100%;
    line-height: 10.133vw;
    background-color: #2eb9f2;
    text-align: center;
    font-size: 4.667vw;
    color: #fff;
    white-space: nowrap;
  }
  #issue .issue_content {
    position: relative;
    width: 100%;
    background-image: url(../img/issu_bg.jpg);
    background-size: contain;
    background-position: top right;
  }
  #issue .issue_content .txt01 {
    font-size: 5.067vw;
    font-weight: 600;
    line-height: 1.7;
    padding: 6% 0 6% 6%;
  }
  #issue .issue_content .txt02 {
    width: 100%;
    font-size: 5.067vw;
    font-weight: 600;
    line-height: 1.5;
    padding: 0 0 12%;
    text-align: center;
    color: #0088c0;
  }
  #issue .issue_content .txt02 span {
    font-size: 7.733vw;
    font-weight: 600;
  }

  /*トーサメモでできること*/
  #possible h2 {
    height: 10.667vw;
    width: 100%;
    line-height: 10.133vw;
    background-color: #2eb9f2;
    text-align: center;
    font-size: 4.667vw;
    color: #fff;
    white-space: nowrap;
  }
  #possible .possible_content {
    position: relative;
    width: 100%;
  }
  #possible .possible01 {
    position: absolute;
    top: 7.4%;
    left: 17%;
    width: 83%;
  }
  #possible .possible01 .txt01 {
    font-size: 4.267vw;
    font-weight: 500;
    line-height: 1.6;
  }
  #possible .possible01 .txt01_2 {
    font-size: 2.933vw;
    font-weight: 500;
    line-height: 1.5;
    color: #6c6c6c;
  }
  #possible .possible01 .txt01_2 span {
    font-size: 2.933vw;
    font-weight: 600;
    color: #0079ab;
  }
  #possible .possible02 {
    position: absolute;
    top: 26.5%;
    left: 17%;
    width: 83%;
  }
  #possible .possible02 .txt01 {
    font-size: 4.267vw;
    font-weight: 500;
    line-height: 1.6;
  }
  #possible .possible02 .txt01_2 {
    font-size: 2.933vw;
    font-weight: 500;
    line-height: 1.5;
    color: #6c6c6c;
  }
  #possible .possible02 .txt01_2 span {
    font-size: 2.933vw;
    font-weight: 600;
    color: #0079ab;
  }
  #possible .possible03 {
    position: absolute;
    top: 46%;
    left: 17%;
    width: 83%;
  }
  #possible .possible03 .txt01 {
    font-size: 4.267vw;
    font-weight: 500;
    line-height: 1.6;
  }
  #possible .possible03 .txt01_2 {
    font-size: 2.933vw;
    font-weight: 500;
    line-height: 1.5;
    color: #6c6c6c;
  }
  #possible .possible03 .txt01_2 span {
    font-size: 2.933vw;
    font-weight: 600;
    color: #0079ab;
  }
  #possible .possible04 {
    position: absolute;
    top: 66.7%;
    left: 17%;
    width: 83%;
  }
  #possible .possible04 .txt01 {
    font-size: 4.267vw;
    font-weight: 500;
    line-height: 1.6;
  }
  #possible .possible04 .txt01_2 {
    font-size: 2.933vw;
    font-weight: 500;
    line-height: 1.5;
    color: #6c6c6c;
  }
  #possible .possible04 .txt01_2 span {
    font-size: 2.933vw;
    font-weight: 600;
    color: #0079ab;
  }

  /*トーサメモの特徴*/
  #features h2 {
    height: 10.667vw;
    width: 100%;
    line-height: 10.133vw;
    background-color: #2eb9f2;
    text-align: center;
    font-size: 4.667vw;
    color: #fff;
    white-space: nowrap;
  }
  .features_content {
    position: relative;
    font-size: 4.267vw;
    font-weight: 500;
    line-height: 2;
    padding: 6% 0 12.5% 7%;
  }
  .features_content span {
    font-weight: 600;
    color: #0079ab;
  }
  .features_content .features_illust {
    position: absolute;
    bottom: 5%;
    right: 2%;
    width: 25% !important;
    z-index: 0;
  }

  /*こんな方におすすめ*/
  #recommend h2 {
    height: 10.667vw;
    width: 100%;
    line-height: 10.133vw;
    background-color: #2eb9f2;
    text-align: center;
    font-size: 4.667vw;
    color: #fff;
    white-space: nowrap;
  }
  .recommend_content {
    position: relative;
    font-size: 4.267vw;
    font-weight: 500;
    line-height: 2;
    padding: 6% 0 11% 7%;
  }
  .recommend_content span {
    font-weight: 600;
    color: #0079ab;
  }

  /*料金*/
  #plan h2 {
    height: 10.667vw;
    width: 100%;
    line-height: 10.133vw;
    background-color: #2eb9f2;
    text-align: center;
    font-size: 4.667vw;
    color: #fff;
    white-space: nowrap;
  }
  .plan_content {
    position: relative;
    padding: 4% 3% 15%;
    width: 100%;
  }
  .plan_content h3 {
    text-align: center;
    font-size: 3.467vw;
    background-color: #b4e9ff;
    border-radius: 4vw;
    width: 100%;
    height: 6.933vw;
    line-height: 6.667vw;
    margin-top: 4vw;
    margin-bottom: 1vw;
  }
  .plan_content .plan_copy {
    width: 100%;
    text-align: center;
    color: #0084bc;
    font-size: 2.267vw;
    font-weight: 600;
    margin-bottom: 0.4vw;
  }
  .plan_content .txt01 {
    font-size: 3.6vw;
    font-weight: 500;
    line-height: 2;
    margin-left: 5%;
  }
  .plan_content .txt01 span.small {
    font-size: 2.667vw;
  }
  .plan_content .txt01 span.gray {
    color: #999;
  }
  .plan_content .note {
    position: absolute;
    right: 5%;
    bottom: 6%;
    font-size: 2vw;
    font-weight: 500;
    line-height: 1.5;
    margin-left: 5%;
    color: #999;
  }

  /*FAQ*/
  #faq h2 {
    height: 10.667vw;
    width: 100%;
    line-height: 10.133vw;
    background-color: #2eb9f2;
    text-align: center;
    font-size: 4.667vw;
    color: #fff;
    white-space: nowrap;
  }
  .faq_content {
    position: relative;
    padding: 4% 5% 4%;
  }
  .faq_wrap li {
    border-bottom: 2px solid #ddd;
    list-style: none;
    padding: 7% 0 3%;
  }
  .faq_wrap li:last-child {
    border: none;
  }
  .faq_wrap .q {
    color: #0084bc;
    font-size: 4vw;
    font-weight: 700;
  }
  .faq_wrap .a {
    font-size: 4vw;
    font-weight: 600;
    margin: 4vw 0;
    line-height: 1.5;
    text-indent: -1em;
    padding-left: 1em;
  }
  .faq_wrap .a .a_txt {
    font-size: 4vw;
    font-weight: 400;
  }
  .faq_wrap .a .note {
    font-size: 3.4vw;
    font-weight: 400;
  }
  /*Bottom CTA*/
  #bottom_cta {
    background-color: #d1f2ff;
    padding: 10% 0;
    text-align: center;
  }
  #bottom_cta h2 {
    width: 100%;
    text-align: center;
    font-size: 5.733vw;
    color: #0095d2;
    white-space: nowrap;
  }
  #bottom_cta a.sign {
    display: block;
    width: 80%;
    height: 16vw;
    background-color: #000;
    border-radius: 1.733vw;
    text-decoration: none;
    text-align: center;
    line-height: 15.067vw;
    color: #fff;
    font-size: 7.067vw;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 10% 10% 1%;
  }
  #bottom_cta .note {
    width: 100%;
    text-align: center;
    font-size: 2.4vw;
    line-height: 1.5;
  }
  #bottom_cta a.contact {
    display: block;
    width: 80%;
    height: 16vw;
    background-color: #9e9e9e;
    border-radius: 1.733vw;
    text-decoration: none;
    text-align: center;
    line-height: 15.067vw;
    color: #fff;
    font-size: 7.067vw;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 5% 10% 2%;
  }
  #bottom_cta a:hover {
    opacity: 0.7;
  }

  /*フッター*/
  footer {
    position: relative;
    background-color: #000;
    color: #fff;
    height: 49.333vw;
  }

  footer .footer_navi {
    padding: 5% 12%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  footer .footer_navi li {
    list-style: none;
  }
  footer .footer_navi li a {
    text-decoration: none;
    color: #fff;
    font-size: 3.067vw;
    font-weight: 500;
    line-height: 2.5;
    letter-spacing: 0.05em;
  }
  footer .copyright {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 8%;
    left: 0;
    font-size: 2.667vw;
  }
}