@charset "UTF-8";
/* CSS Document */
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese');*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Zen+Old+Mincho&family=Zen+Antique&family=BIZ+UDPMincho:wght@100;300;400;500;700;900&display=swap");
/*@import url('https://fonts.gohttps://fonts.googleapis.com/css2?family=Zen+Old+Mincho&family=Zen+Antique&family=BIZ+UDPMincho&display=swap');*/
/*変数*/
/*---------画面幅---------*/
/*---------流用高---------*/
/*---------色コード---------*/
/*関数*/
/*---------------------変数レスポンシブ------------------------*/
/* リセット
----------------------------------------------------------- */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif !important; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal; }

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

caption, th {
  text-align: left; }

q:before, q:after {
  content: ''; }

object, embed {
  vertical-align: top; }

img, abbr, acronym, fieldset {
  border: 0; }

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

/*---------------------基本------------------------*/
* {
  box-sizing: border-box;
  margin: 0;
  /*vertical-align: bottom;*/ }

html, body {
  /*font-family:verdana,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;*/
  /*line-height:1.5;*/
  font-size: 16px;
  margin: 0;
  padding: 0;
  /*min-width: 1120px;*/
  -webkit-text-size-adjust: none;
  color: #333; }

img {
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  flex-shrink: 0; }

a {
  text-decoration: none;
  color: inherit;
  display: block; }

　
h2, p {
  margin: 0; }

h3 {
  font-size: 1.2rem; }

br {
  font-size: 0; }

/*初期化*/
p {
  font-size: 1rem; }

input,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none; }

ul {
  margin: 0;
  padding: 0; }

li {
  list-style: none;
  display: inline-block; }

span {
  display: inline-block; }

main {
  /*overflow-X: hidden;*/ }
  @media screen and (max-width: 767px) {
    main {
      /*margin-bottom: 100px;*/ } }

/*---------------------汎用------------------------*/
.wrap-style-b {
  width: 1280px;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .wrap-style-b {
      width: 100%; } }

.wrap-style-1 {
  width: 1280px;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .wrap-style-1 {
      width: calc(100% - 80px); } }
  @media screen and (max-width: 767px) {
    .wrap-style-1 {
      width: calc(100% - 40px); } }

.wrap-style-2 {
  width: 1000px;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .wrap-style-2 {
      width: calc(100% - 80px); } }
  @media screen and (max-width: 767px) {
    .wrap-style-2 {
      width: calc(100% - 40px); } }

.wrap-style-3 {
  width: 1200px;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .wrap-style-3 {
      width: calc(100% - 80px); } }
  @media screen and (max-width: 767px) {
    .wrap-style-3 {
      width: calc(100% - 40px); } }

.wrap-style-p {
  width: 100%;
  margin: 0 auto;
  padding: 70px 0;
  background: url(../img/features_bg.jpg); }
  @media screen and (max-width: 1024px) {
    .wrap-style-p {
      width: calc(100% - 80px); } }
  @media screen and (max-width: 767px) {
    .wrap-style-p {
      width: 100%; } }

.flex-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media screen and (max-width: 767px) {
    .flex-base {
      display: block; } }

/*---------------------フッター---------------------*/
.fix-sp-btn {
  display: none; }
  @media screen and (max-width: 767px) {
    .fix-sp-btn {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      position: fixed;
      bottom: 0;
      background: #fff;
      z-index: 1; }
      .fix-sp-btn > div {
        width: 49%; } }

/*---------------------バナー------------------------*/
.banner {
  width: 100%;
  padding: 120px 0 0; }
  @media screen and (max-width: 1024px) {
    .banner {
      padding: 110px 0 0; } }
  @media screen and (max-width: 768px) {
    .banner {
      padding: 85px 0 0; } }
  @media screen and (max-width: 767px) {
    .banner {
      padding: 65px 0 0; } }
  .banner img {
    display: block;
    width: 100%;
    height: 100%; }

/*---------------------ファーストビュー------------------------*/
.first-view-area .first-view {
  margin: 60px auto; }
  .first-view-area .first-view h1 {
    width: 500px;
    text-align: center;
    margin: 0 auto;
    /*@include tab(){
      font-size: 0.9rem;
    }*/
    /*span {
      font-size: 1.8rem;
      color: #ED6C00;
      display: inline-block;
      font-weight: 600;
      big {
        font-weight: 700;
      }
    }*/ }
    @media screen and (max-width: 767px) {
      .first-view-area .first-view h1 {
        width: 350px;
        /*margin-bottom: 35px;*/ } }
  .first-view-area .first-view .first-exp {
    margin-top: 60px;
    text-align: center; }
    .first-view-area .first-view .first-exp h2 {
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0 0 20px; }
    .first-view-area .first-view .first-exp .exp-img {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 15px;
      place-items: center;
      justify-items: center;
      align-items: center; }
      @media screen and (max-width: 767px) {
        .first-view-area .first-view .first-exp .exp-img {
          grid-template-columns: 1fr 1fr; } }
      .first-view-area .first-view .first-exp .exp-img .exp-img-box p {
        font-size: 0.9rem;
        margin: 5px 0; }

/*---------------------8つの特徴------------------------*/
.point-area .point-box {
  width: 1000px;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .point-area .point-box {
      width: calc(100% - 80px); } }
  @media screen and (max-width: 767px) {
    .point-area .point-box {
      width: calc(100% - 40px); } }
  .point-area .point-box h1 {
    width: 700px;
    text-align: center;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .point-area .point-box h1 {
        width: 300px;
        /*margin-bottom: 35px;*/ } }
  .point-area .point-box .point-img {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
    place-items: center;
    justify-items: center;
    align-items: center; }
    @media screen and (max-width: 767px) {
      .point-area .point-box .point-img {
        grid-template-columns: 1fr 1fr; } }

/*---------------------システム構成図------------------------*/
.structure-area .structure-box {
  margin: 60px auto; }
  .structure-area .structure-box h1 {
    display: flex;
    background-color: #0085AC;
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 40px; }
    .structure-area .structure-box h1 img {
      width: 22px;
      margin: 0px 10px 0 20px; }
  .structure-area .structure-box .structure-line {
    width: 360px;
    margin: 30px 0 50px; }
    @media screen and (max-width: 767px) {
      .structure-area .structure-box .structure-line {
        width: 300px;
        margin: 20px auto 40px; } }
  .structure-area .structure-box .structure-img {
    width: 1200px; }
    @media screen and (max-width: 767px) {
      .structure-area .structure-box .structure-img {
        width: auto;
        max-width: 400px;
        margin: 0 auto; } }

/*---------------------製品仕様------------------------*/
.product-area .product-box {
  margin: 60px auto; }
  .product-area .product-box h1 {
    display: flex;
    background-color: #0085AC;
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 40px; }
    .product-area .product-box h1 img {
      width: 22px;
      margin: 0px 10px 0 20px; }
  .product-area .product-box .product-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 0px;
    place-items: end center;
    justify-items: center;
    align-items: end;
    margin: 30px auto 60px; }
    @media screen and (max-width: 767px) {
      .product-area .product-box .product-list {
        grid-template-columns: 1fr;
        gap: 80px 0px; } }
    .product-area .product-box .product-list .product-item {
      width: 90%; }
      @media screen and (max-width: 767px) {
        .product-area .product-box .product-list .product-item {
          width: 100%; } }
      .product-area .product-box .product-list .product-item .product-img {
        text-align: center; }
        .product-area .product-box .product-list .product-item .product-img img {
          /*display: flex;
          margin: 0 auto;*/ }
      .product-area .product-box .product-list .product-item .name {
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin: 30px auto 15px; }
      .product-area .product-box .product-list .product-item dl {
        display: grid;
        grid-template-columns: 25% 75%;
        width: 100%;
        border-bottom: 1px solid #231815; }
        @media screen and (max-width: 767px) {
          .product-area .product-box .product-list .product-item dl {
            grid-template-columns: 30% 70%; } }
        .product-area .product-box .product-list .product-item dl dt {
          background-color: #FFFCDB;
          border-top: 1px solid #231815;
          border-left: 1px solid #231815;
          font-size: 0.9rem;
          font-weight: 400;
          padding: 3px 10px; }
          @media screen and (max-width: 767px) {
            .product-area .product-box .product-list .product-item dl dt {
              font-size: 0.7rem; } }
        .product-area .product-box .product-list .product-item dl dd {
          border-top: 1px solid #231815;
          border-left: 1px solid #231815;
          border-right: 1px solid #231815;
          text-align: center;
          font-size: 0.9rem;
          padding: 3px 10px; }
          @media screen and (max-width: 767px) {
            .product-area .product-box .product-list .product-item dl dd {
              font-size: 0.7rem; } }
      .product-area .product-box .product-list .product-item .note {
        font-size: 0.8rem;
        margin: 5px auto 0; }
      .product-area .product-box .product-list .product-item .link {
        width: fit-content;
        font-size: 0.9rem;
        color: #0087AF;
        text-decoration: underline;
        margin-top: 10px; }
        .product-area .product-box .product-list .product-item .link:hover {
          opacity: 0.6; }
  .product-area .product-box .option {
    width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .product-area .product-box .option {
        width: 100%; } }
    .product-area .product-box .option h2 {
      color: #FFF;
      background-color: #004961;
      border-radius: 20px;
      font-size: 18px;
      font-weight: 600;
      line-height: 40px;
      text-align: center; }

/*---------------------注意事項------------------------*/
.caution-area .caution-box {
  width: 1200px;
  margin: 60px auto; }
  @media screen and (max-width: 767px) {
    .caution-area .caution-box {
      width: 100%;
      margin: 60px auto 70px; } }
  .caution-area .caution-box .caution {
    background-color: #E6E6E6;
    padding: 40px 120px;
    font-size: 0.9rem;
    line-height: 1.5rem; }
    @media screen and (max-width: 767px) {
      .caution-area .caution-box .caution {
        padding: 40px 20px 60px; } }
    @media screen and (max-width: 767px) {
      .caution-area .caution-box .caution ul li {
        text-indent: -1.2em;
        padding-left: 1.2em;
        margin: 5px 0; } }

/*---------------------お問い合わせ------------------------*/
@media screen and (max-width: 767px) {
  .contact-area {
    display: none; } }
.contact-area .contact-box {
  margin: 60px auto; }
  .contact-area .contact-box .cont_btn {
    width: 300px;
    margin: 0 auto; }
    .contact-area .contact-box .cont_btn a {
      display: block;
      background: #ff191d;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      padding: 11px;
      transition-duration: .4s; }
      .contact-area .contact-box .cont_btn a:hover {
        opacity: 0.6;
        letter-spacing: 0.15em; }
      .contact-area .contact-box .cont_btn a span {
        text-decoration: underline; }
  .contact-area .contact-box .cont_txt {
    margin: 10px auto 10px; }
    .contact-area .contact-box .cont_txt .normal_size {
      font-size: 17px;
      font-weight: 500;
      text-align: center;
      color: #ff191d;
      margin: 0;
      letter-spacing: 1px;
      display: flex;
      justify-content: center; }
      .contact-area .contact-box .cont_txt .normal_size a {
        font-size: 20px;
        font-weight: bold;
        color: #ff191d; }
    .contact-area .contact-box .cont_txt .small_size {
      font-size: 15px;
      text-align: center;
      color: #ff191d;
      letter-spacing: 1px; }