@charset "utf-8";

/*___________スマホ用CSS_____________*/
@media print, screen and (max-width: 1000px) {
  /*ウィンドウ幅が最大1000pxまでの場合に適用*/
  body,
  html {
    width: 100%;
    overflow-x: hidden;
  }
  body {
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2em;
    color: #0d4867;
    -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;
    }
  }
  .sp_view {
    display: block;
  }
  .pc_view {
    display: none;
  }
  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: none;
    margin: 0 auto;
    background-color: #f5f5f7;
    overflow-x: hidden;
  }
  #content_wrapper img {
    width: 100%;
    height: auto;
  }

  /*FV*/
  #fv {
    position: relative;
    width: 100%;
    padding-bottom: 20%;
  }
  #logo {
    position: absolute;
    top: 2.5%;
    left: 5%;
    font-size: 5.116vw;
    font-weight: 600;
    color: #008688;
  }
  #fv .head_copy {
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 6.977vw;
    font-weight: 700;
    color: #0d4867;
    line-height: 1.34em;
  }
  #fv .head_copy span {
    font-size: 6.977vw;
  }
  #fv .sub_copy {
    position: absolute;
    top: 36%;
    left: 5%;
    font-size: 3.186vw;
    font-weight: 700;
    color: #0d4867;
    line-height: 1.4em;
  }
  #fv .batc_wrap {
    position: absolute;
    top: 50%;
    left: 5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5.116vw;
  }
  #fv .batc_wrap .batch {
    display: flex;
    align-items: center; /* 縦中央 */
    justify-content: center; /* 横中央 */
    color: #006479;
    font-size: 4.186vw;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    background-color: rgba(95, 227, 255, 0.7);
    border-radius: 46.512vw;
    height: 25.581vw;
    width: 25.581vw;
  }
  #fv .note {
    position: absolute;
    top: 73%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 3.953vw;
    color: #0d4867;
    font-weight: 500;
  }
  #fv .btn {
    position: absolute;
    top: 84%;
    left: 5%;
    display: flex;
    width: 92%;
  }
  /*3STEP*/
  #three_step {
    position: relative;
    width: 100%;
  }
  #three_step h2.midashi {
    position: absolute;
    top: 7%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.1em;
  }
  #three_step h2.midashi span {
    font-size: 4.651vw;
    font-weight: 500;
  }
  #three_step .txt01 {
    position: absolute;
    top: 51%;
    left: 20%;
    font-size: 4.651vw;
    color: #0d4867;
    font-weight: 700;
    line-height: 2em;
  }
  #three_step .txt01 p {
    font-size: 3.721vw;
    color: #0d4867;
    font-weight: 500;
    line-height: 1.4em;
  }
  #three_step .txt01 p.note {
    font-size: 2.7vw;
    opacity: 0.8;
    line-height: 1.4;
    margin-top: 2%;
  }

  #three_step .txt02 {
    position: absolute;
    top: 65%;
    left: 20%;
    font-size: 4.651vw;
    color: #0d4867;
    font-weight: 700;
    line-height: 2em;
  }
  #three_step .txt02 p {
    font-size: 3.721vw;
    color: #0d4867;
    font-weight: 500;
    line-height: 1.4em;
  }
  #three_step .txt03 {
    position: absolute;
    top: 77%;
    left: 20%;
    font-size: 4.651vw;
    color: #0d4867;
    font-weight: 700;
    line-height: 2em;
  }
  #three_step .txt03 p {
    font-size: 3.721vw;
    color: #0d4867;
    font-weight: 500;
    line-height: 1.4em;
  }
  #three_step .txt04 {
    position: absolute;
    top: 89%;
    left: 20%;
    font-size: 3.721vw;
    color: #0d4867;
    font-weight: 500;
    line-height: 1.4em;
  }

  /*できること*/
  #can_do {
    position: relative;
    width: 90%;
    margin: 10% 5%;
  }
  #can_do h2.midashi {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.1em;
  }
  #can_do ul {
    list-style: none;
    font-size: 3.953vw;
    font-weight: 500;
    line-height: 2em;
    color: #0d4867;
    margin: 5% 0 10%;
  }
  #can_do li span {
    display: block;
    font-size: 3.4vw;
    margin-bottom: 3%;
    font-weight: 400;
    line-height: 1.5;
  }
  /*こんな人におすすめ*/
  #recommend {
    position: relative;
    width: 90%;
    margin: 5% 5% 10%;
  }
  #recommend h2.midashi {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.1em;
  }
  #recommend ul {
    list-style: none;
    font-size: 3.953vw;
    font-weight: 500;
    line-height: 2em;
    color: #0d4867;
    margin: 5% 0 0;
  }
  #recommend li span {
    display: block;
    font-size: 3.4vw;
    margin-bottom: 3%;
    font-weight: 400;
    line-height: 1.5;
  }
  /*主な用途*/
  #main_uses {
    position: relative;
    width: 100%;
    margin: 8% 0 0;
  }
  #main_uses h2.midashi {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.1em;
  }
  #main_uses p.midashi_sub {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 3.651vw;
    font-weight: 500;
    line-height: 1.7em;
  }
  #main_uses ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.326vw;
    margin: 9% 0;
    padding: 0;
  }

  #main_uses ul li {
    width: calc(33.333% - 4.651vw);
    text-align: center;
    background: linear-gradient(135deg, #58b3e6, #2f93c9);
    color: #fff;
    font-size: 3.721vw;
    font-weight: 600;
    border-radius: 3.721vw;
    padding: 1.163vw 3.721vw;
    box-sizing: border-box;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
  }

  /*seo_intro*/
  #seo_intro {
    position: relative;
    width: 90%;
    margin: 13% 5% 0;
    text-align: center;
  }
  #seo_intro h2.midashi {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.4em;
  }
  #seo_intro .midashi_sub {
    width: 100%;
    margin: 4% auto 1vw;
    line-height: 1.8;
    text-align: left;
    font-size: 3.721vw;
  }

  /*FAQ*/
  #faq {
    position: relative;
    width: 100%;
    margin: 15% 0 10%;
  }
  #faq h2.midashi {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.1em;
  }
  #faq dl {
    width: 90%;
    margin: 5% 5% 0;
    color: #0d4867;
  }
  #faq dl dt {
    font-size: 4.186vw;
    margin-bottom: 1.163vw;
    font-weight: 600;
  }
  #faq dl dd {
    font-size: 3.721vw;
    margin-bottom: 6.977vw;
    font-weight: 400;
    text-indent: -1.3em;
    padding-left: 1.3em;
    line-height: 1.6;
  }
  #faq dl dd span {
    font-size: 4.186vw;
    font-weight: 600;
  }

  /*DEMO*/
  #demo {
    position: relative;
    width: 90%;
    margin: 10% 5% 0;
  }
  #demo h2.midashi {
    width: 100%;
    text-align: center;
    color: #0d4867;
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.1em;
  }
  #demo .txt01 {
    width: 100%;
    text-align: center;
    font-size: 3.721vw;
    font-weight: 500;
    line-height: 1.5;
    margin: 2% 0 4.5%;
  }

  .map {
    margin: 0;
    padding: 0;
  }

  .map iframe {
    height: 90.674vw !important;
    min-height: auto;
  }

  /*LAST CTA*/
  #last_cta {
    width: 90%;
    margin: 8% auto 0;
    text-align: center;
    color: #0d4867;
  }
  #last_cta h2.midashi {
    font-size: 6.977vw;
    font-weight: 700;
    line-height: 1.3;
  }
  #last_cta .txt01 {
    font-size: 3.6vw;
    font-weight: 500;
    line-height: 1.8;
    margin: 2% 0 4%;
  }
  #last_cta ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 2.5vw;
    padding: 0;
    margin: 0;
  }
  #last_cta ul li {
    width: calc(33.333% - 1.7vw);
    text-align: center;
    background: linear-gradient(135deg, #58b3e6, #2f93c9);
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    border-radius: 10px;
    padding: 2.5vw 1vw;
    line-height: 1.3;
  }

  /*ボトムボタン*/
  .bottom_btn {
    display: block;
    width: 96%;
    margin: 13% auto 10%;
  }

  /* footer */
  footer {
    width: 100%;
    background: linear-gradient(135deg, #58b3e6, #2f93c9);
    text-align: center;
    padding: 3.256vw 0 2.326vw;
  }

  .bottom_navi {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 6.977vw;
    margin: 0 0 9.302vw;
    padding: 0;
  }

  .bottom_navi li {
    font-size: 3.023vw;
  }

  .bottom_navi a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
  }

  .bottom_navi a:hover {
    opacity: 0.7;
  }

  .copyright {
    color: #fff;
    font-size: 3.023vw;
    font-weight: 500;
  }
}