@charset "utf-8";

/* =========================================
* ページ全体のスタイル
* ======================================== */

/* 変数
* ---------------------------------- */
:root {
  --main-color: #0D2EA0;
  --light-color: #CED6E9;
  --light-gray: #E7E9EB;
  --black: #333333;
  --hov-move: all .4s;
  --txt54-36: 54px;
  --txt40-32: 40px;
  --txt36-24: 36px;
  --txt32-24: 32px;
  --txt24-20: 24px;
  --txt20-18: 20px;
  --txt18-16: 18px;
  --txt16-14: 16px;
  --txt14-13: 14px;
  --m120-80: 120px;
  --m80-40: 80px;
  --m56-32: 56px;
  --m40-24: 40px;
  --m32-16: 32px;
  --m24-16: 24px;
  --m16-8: 16px;
  --w50: 50%;
  --w30: 30%;
  --w25: 25%;
}

/* =========================================
* 共通
* ======================================== */


/* コンテナ
* ---------------------------------- */

.page-wrap {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--txt16-14);
  line-height: 1.7em;
  box-sizing: border-box;

  ul {
    list-style-type: none;
  }

  p {
    margin: 0;
  }

  dt,
  dd {
    display: block;
    margin: auto;
  }

  ol,
  ul {
    padding-left: 1.5em;
  }

  /* img {
    max-width: 100%;
    max-height: 60vh;
  } */

  a.inline-link {
    color: #2282CC;
  }

  .pc-none {
    display: none;
  }

  .sp-none {
    display: block;
  }

  .reset-indent {
    text-indent: 0;
  }

  /* フレックス周り
* ---------------------------------- */
  .sp-flex {
    display: flex;
  }

  .flex {
    display: flex;
  }

  .flexR {
    flex-direction: row-reverse;
  }

  .alignS {
    align-items: flex-start;
  }

  .alignC {
    align-items: center;
  }

  .alignE {
    align-items: flex-end;
  }

  .justA {
    justify-content: space-around;
  }

  .justB {
    justify-content: space-between;
  }

  .justC {
    justify-content: center;
  }

  .gap16 {
    gap: var(--m16-8);
  }

  .gap24 {
    gap: var(--m24-16);
  }

  .gap32 {
    gap: var(--m32-16);
  }

  .gap40 {
    gap: var(--m40-24);
  }

  .gap56 {
    gap: var(--m56-32);
  }

  .w50 {
    width: var(--w50);
  }

  .w30 {
    width: var(--w30);
  }

  .w25 {
    width: var(--w25);
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-bottom: var(--m32-16);

    figure {
      margin-bottom: 0 !important;
    }
  }

  .container {
    width: 92%;
    max-width: 870px;
    margin: auto;
  }

  .mt0 {
    margin-top: 0px !important;
  }

  .mb0 {
    margin-bottom: 0px !important;
  }


  /* テキスト周り
* ---------------------------------- */

  h2 {
    font-size: var(--txt18-16);
    text-align: left;
    font-weight: 500;
  }

  .note-txt {
    font-size: 13px;
    text-align: justify;
  }

  ul.note-txt {
    font-size: var(--txt16-14);
    padding-left: 1em;
    text-indent: -1em;
  }

}


/* =========================================
* タイトル部分
* ======================================== */
.page-title {
  text-align: center;

  hgroup {
    gap: 8px;
    padding: var(--m32-16) 0;

    h1 {
      font-size: 35px;
      line-height: 1.2em;
      margin: 0;

      span {
        font-size: .7em;
        color: var(--main-color);
      }
    }
  }
}

/* =========================================
* 検索部分
* ======================================== */
.search-wrap {
  padding: var(--m40-24) 0;

  .container {
    text-align: center;

    .search-box {
      background-color: var(--light-gray);
      max-width: 485px;
      margin: auto;
      padding: 8px 24px;

      h2 {
        margin: 0 0 8px 4px;
      }

      .note-txt {
        margin: 8px 0 0 4px;
      }

      .search-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        overflow: hidden;
        background-color: #fff;
        border-radius: 25px;
        height: 30px;
        padding: .4em 0;
        font-size: 16px;

        label {
          width: 100%;
          height: 100%;

          input {
            width: 90%;
            height: 100%;
            border: none;
            box-sizing: border-box;
            font-size: 1em;
            outline: none;
            border-radius: 25px 0 0 25px;
          }
        }

        button {
          display: grid;
          place-items: center;
          width: 80px;
          height: 30px;
          border: none;
          background-color: transparent;
          cursor: pointer;
          border-left: 2px solid var(--light-gray);

          &::after {
            width: 24px;
            height: 24px;
            background-image: url(../img/icon-search.png);
            background-repeat: no-repeat;
            content: '';
          }
        }

      }

    }

    .result-box {
      padding: var(--m32-16) 0;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      place-content: center;
    }

    h3 {
      font-size: var(--txt18-16);
    }
  }
}

#search-result {
  display: none;
  margin-top: 20px;
}

/* =========================================
* FAQ部分
* ======================================== */

/* タブ切り替え
* ---------------------------------- */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;


  .tab-container {
    display: none;
    width: 100%;
    padding: 32px 0px;
    background-color: #fff;
  }

  label {
    flex: 1 1;
    order: -1;
    padding: 1em .5em;
    background-color: var(--light-color);
    color: var(--main-color);
    font-size: min(1.9vw, 18px);
    line-height: 150%;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    display: grid;
    place-items: center;

    &:hover {
      opacity: .8;
    }

    &:has(:checked) {
      background-color: #fff;
      border: solid 1px var(--main-color);
      border-bottom: 0;

      &+.tab-container {
        display: block;
      }
    }

    input {
      display: none;
    }
  }

}

/* アンカーリンク
* ---------------------------------- */
.anchor-wrap ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 0;

  li {
    white-space: nowrap;
    margin: 0 4px 16px;
  }

  .anchor-btn {
    border: 1px solid var(--main-color);
    border-radius: 25px;
    display: block;
    color: var(--main-color);
    padding: .5em 2.5em .5em 1.5em;
    width: auto;
    min-width: 60px;
    position: relative;

    &:after {
      position: absolute;
      border-bottom: 2px solid var(--main-color);
      border-right: 2px solid var(--main-color);
      width: .6em;
      height: .6em;
      top: 45%;
      right: 1.2em;
      content: "";
      transform: translateY(-50%) rotate(45deg);
    }
  }
}

/* カテゴリーごと
* ---------------------------------- */
.category-wrap {
  text-align: center;
  padding: var(--m40-24) 0;

  h3.category-title {
    font-size: var(--txt20-18);
    color: var(--main-color);
    font-weight: 700;
    border-bottom: 4px solid var(--main-color);
    padding-bottom: .5em;
    display: inline-block;
    margin-bottom: var(--m40-24);
  }
}

/* --- FAQ --- */
.faq-item {
  border-top: 1px solid var(--light-gray);

  &:last-child {
    border-bottom: 1px solid var(--light-gray);
  }

  img {
    max-width: 440px;
    max-height: 60vh;
  }
  img.w100p {
    max-width: 100% !important;
  }

  .faq-question {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-right: 3.5em;

    &::after {
      content: "";
      width: .7em;
      height: .7em;
      display: inline-block;
      border-top: var(--black) 2px solid;
      border-right: var(--black) 2px solid;
      position: absolute;
      transform: translateY(-50%)rotate(45deg);
      top: 50%;
      right: var(--m32-16);
      transition: var(--hov-move);
    }

    .faq-no {
      color: var(--main-color);
      font-weight: 700;
      min-width: 8em;
    }

    h4.faq-title {
      font-weight: 400;
      text-align: justify;
    }
  }

  .faq-answer {
    display: none;

    .faq-answer-content {
      text-align: justify;
      max-width: 800px;
      margin: auto;
      padding: var(--m24-16);
      line-height: 150%;

      p,
      ol,
      ul,
      figure,
      h5,
      h6 {
        margin: 0;
        margin-bottom: var(--m16-8);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .detail-btn {
        background-color: var(--main-color);
        color: #fff;
        font-size: var(--txt16-14);
        font-weight: 600;
        padding: .7em 2.5em .7em 1.8em;
        border-radius: 5px;
        position: relative;
        display: inline-block;

        span.icon-pdf {
          display: inline-block;
          vertical-align: middle;
          padding-left: .5em;
        }

        &::after {
          content: "";
          position: absolute;
          display: inline-block;
          width: .5em;
          height: .5em;
          border-top: 2px solid #fff;
          border-right: 2px solid #fff;
          transform: translateY(-50%) rotate(45deg);
          top: 50%;
          right: 16px;
        }
      }

      .flex {
        margin-bottom: var(--m40-24);

        img {
          max-width: 360px;
        }
      }
      .grid-4 {
        img {
          max-width: 360px;
        }
      }

      figure {
        margin-bottom: var(--m40-24);

        img {
          display: block;
        }
      }

      figcaption {
        padding-top: .5em;
        display: block;

        p {
          margin: 0;
        }

      }

      h5 {
        font-size: 1.3em;
        margin-top: var(--m24-16);
      }

      h6 {
        font-size: 1.2em;
        margin-top: var(--m24-16);

        figure & {
          margin-top: 0;
        }
      }

      table {
        border: 1px solid #000;
        border-collapse: collapse;
        font-size: 13px;
        table-layout: fixed;
        width: 100%;

        th,
        td {
          text-align: center;
          padding: .5em;
          border: 1px solid #000;
        }
      }

      .faq-table-wrap {
        overflow-x: scroll;
      }

      .faq-table {
        min-width: 800px;

        th {
          background-color: var(--light-color);
        }


        td.impossible {
          background-color: var(--main-color);
          color: #fff;
        }
      }

      .red-txt {
        color: red;
      }

      .bold-txt {
        font-weight: 700;
      }

      .border-txt {
        text-decoration: underline;
      }

      .circle-number-txt {
        padding-left: 1em;
        text-indent: -1em;
      }

      ol.circle-number-list {
        text-indent: -1em;

        li {
          list-style: none;
        }
      }

      ul.normal-list {
        li {
          list-style: disc;
        }
      }

      .list-openlines {
        li:not(:last-child) {
          margin-bottom: 1.0em;
        }
      }

      .border-wrap {
        border: var(--black) solid 1px;
        padding: var(--m16-8);
        margin-bottom: var(--m16-8);
      }

      .pattern-wrap {
        background-color: var(--black);
        color: #fff;
        padding: .2em .5em;
      }

      .triangle-wrap {
        width: 100%;
        height: 40px;
        position: relative;

        .triangle {
          width: 0;
          height: 0;
          border-style: solid;
          border-right: 50px solid transparent;
          border-left: 50px solid transparent;
          border-top: 40px solid var(--black);
          border-bottom: 0;
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
        }
      }
    }
  }

  &.active {
    .faq-question {
      background-color: var(--light-gray);

      &::after {
        transform: translateY(-50%)rotate(135deg);
        transition: var(--hov-move);
      }
    }

    .faq-answer {
      display: block;
    }
  }
}

/* =========================================
* お問い合わせ
* ======================================== */
.contact-wrap {
  background-color: var(--light-gray);
  padding: var(--m40-24) 0;

  h2 {
    font-size: 1em;
  }

  .contact-col {
    background-color: #fff;
    text-align: center;
    padding: var(--m40-24);
    margin-bottom: var(--m32-16);
    border-radius: var(--m32-16);

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      font-size: var(--txt20-18);
      font-weight: 700;
      color: var(--main-color);
      margin: 0 auto 1em auto;
    }
    hr {
      margin: 2.5em 0;
      padding: 0;
      height: 0;
      border: 0;
      border-bottom: 1px solid #bbbbbb;
    }

    &.chatbot-col p {
      text-align: justify;
    }

    &.download-col .download-wrap p {
      text-align: center;
    }

    .contact-txt {
      margin-top: var(--m16-8);
    }

    .contact-btn {
      background-color: var(--main-color);
      color: #fff;
      display: flex;
      align-items: center;
      padding: .6em;
      width: 85%;
      max-width: 300px;
      justify-content: center;
      border-radius: 10px;
      font-size: var(--txt20-18);

      .contact-icon {
        display: inline-block;
        margin-right: .5em;
      }
    }

    .tel-wrap {
      background-color: var(--main-color);
      color: #fff;
      border-radius: var(--m16-8);
      padding: var(--m16-8) var(--m24-16);
      display: inline-block;
      font-size: var(--txt20-18);
      width: 90%;
      max-width: 537px;

      p {
        padding: var(--m16-8);
      }

      .tel-number {
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: center;
        font-size: var(--txt40-32);
        border-top: 1px solid #fff;
      }
    }

    img.logo-chatbot {
      max-width: 124px;
      margin-left: 1em;
    }
  }
}


/* =========================================
* リンク関係
* ======================================== */
.link {
  color: #2282cc;
  text-decoration: underline;

  .mod-inIcon { /* common.cssの記述をオーバーライド */
    margin-left: 0;
  }
}


@media (max-width: 768px) {

  /* 変数
  * ---------------------------------- */
  :root {
    --txt54-36: 36px;
    --txt40-32: 32px;
    --txt36-24: 24px;
    --txt32-24: 24px;
    --txt24-20: 20px;
    --txt20-18: 18px;
    --txt18-16: 16px;
    --txt16-14: 14px;
    --txt14-13: 13px;
    --m120-80: 80px;
    --m80-40: 40px;
    --m56-32: 32px;
    --m40-24: 24px;
    --m32-16: 16px;
    --m24-16: 16px;
    --m16-8: 8px;
    --w50: 100%;
    --w30: 100%;
    --w25: 50%;
  }

  /* 共通
  * ---------------------------------- */
  .page-wrap {
    .pc-none {
      display: block;
    }

    .sp-none {
      display: none;
    }

    .flex {
      flex-direction: column;
    }
  }

  /* =========================================
  * FAQ
  * ======================================== */

  /* タブ切り替え
  * ---------------------------------- */
  .tab-wrap {
    gap: 4px;

    label {
      padding: .5em .2em;
      font-size: 13px;

    }

  }

  /* カテゴリごと
  * ---------------------------------- */
  /* --- FAQ --- */
  .faq-item {
    .faq-question {
      .faq-no {
        min-width: 6em;
      }
    }

    img {
      max-width: 100%;
    }
  }

  /* アンカーリンク
  * ---------------------------------- */
  .anchor-wrap ul {

    .anchor-btn {
      font-size: 13px;
      padding: .5em 2.5em .5em 1em;
      min-width: auto;

      &:after {
        width: .5em;
        height: .5em;
      }
    }
  }

  /* 動画の埋め込み
  * ---------------------------------- */
  .movie-embed {
    width: 100%;
    aspect-ratio: 16 / 9;

    iframe {
      width: 100%;
      height: 100%;
    }
  }


  /* =========================================
  * お問い合わせ
  * ======================================== */
  .contact-wrap {

    .contact-col {

      .tel-wrap {
        font-size: 16px;

        .tel-number {
          font-size: 28px;
        }
      }
      hr {
        margin: 2em 0;
      }
      img.logo-chatbot {
        max-width: 138px;
        margin-left: 0;
      }

      &.download-col .download-wrap p {
        text-align: justify;
      }
    }
  }
}

@media print, screen and (max-width: 900px) {
  .faq-item {
    .faq-answer {
      .faq-answer-content {
        .grid-4 {
          img {
            max-width: 100%;
          }
        }
        .flex {
          img {
            max-width: 100%;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}


/* =========================================
* 追従チャットボットバナー
* ======================================== */
/*
マシナビお問い合わせページにある追従メニューのうち、チャットボットバナーのみ実装
スタイルは下記より必要部分をコピーし、本ページ用に調整しています
/product/machine/speedio-navi/css/style.ashx
/product/machine/speedio-navi/css/common.ashx
*/
.fl-link-mini {
  position: fixed;
  right: 0;
  /* top: 172.5px; */
  bottom: 172.5px;
  width: 66px;
  z-index: 100;

  img {
    max-width: 100%;
  }
  button, input, select, textarea {
    font: inherit;
    margin: 0;
  }
  li {
    position: relative;
    right: -8px;
    transition: all .2s;
    margin-bottom: 10px;
    width: 66px;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0 0 4px 0;
    background: linear-gradient(to left, #9e5500, #e68000 9px);
    border-radius: 4px 0 0 4px;
  }
  li:last-child {
    margin-bottom: 0;
  }
  li:hover {
    right: 0;
    transition: all .2s;
  }
  li.chatbot {
    width: 182px;
    /* height: 161px; */
    background: none;
    right: 90px;
  }
  li.chatbot:hover {
    right: 98px;
    transition: all .2s;
  }
}
.close-btn {
  display: none;
}
@media print, screen and (min-width: 901px) {
  .fl-link-mini {

    * {
      margin: 0;
      padding: 0;
    }
    *, ::before, ::after {
      box-sizing: border-box;
    }

    ul, li {
      margin: 0px;
      padding: 0px;
      list-style: outside none;
      word-break: normal;
    }
    img {
      margin: 0px;
      padding: 0px;
      border: none;
      line-height: 0;
      vertical-align: bottom;
    }
  }
}
@media print, screen and (max-width: 900px) {
  .fl-link-mini {
    position: fixed;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    z-index: 99;

    * {
      margin: 0;
      padding: 0;
    }
    *, ::before, ::after {
      box-sizing: border-box;
    }
    ul, li {
      margin: 0px;
      padding: 0px;
      list-style: outside none;
      word-break: normal;
    }
    ul {
      display: flex;
      justify-content: flex-start;
      position: relative;
    }
    li.chatbot {
      width: 182px;
      height: 161px;
      background: none;
      position: absolute;
      right: -30px;
      bottom: -5px;
      display: block;
    }
    li.chatbot:hover {
      right: -30px;
      transition: all .2s;
    }
  }
  .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: -10px;
    display: block;
  }
  .chat-close-hidden {
    display: none !important;
  }

  /* 上に戻るボタンの位置を上にずらす */
  .st-backToTopFixed {
    bottom: 190px;
  }
}