@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');


/**
 * XF11NX2S Style
 * ================================================================================
 * Table of Contents:
 *
 * Common Settings
 * Top Page Settings
 * Other Settings
 * ================================================================================
 */






/**
 * ================================================================================
 * Common Settings
 * ================================================================================
 */


/* -- Display -- */
.nv-mechaless-disBlock { display: block !important; }
.nv-mechaless-disInlineblock { display: inline-block !important; }
.nv-mechaless-disInline { display: inline !important; }
.nv-mechaless-disFlex { display: flex !important; }
.nv-mechaless-disInlineFlex { display: inline-flex !important; }
.nv-mechaless-disNone { display: none !important; }

.nv-xf11nx2s-disBlock { display: block !important; }
.nv-xf11nx2s-disInlineblock { display: inline-block !important; }
.nv-xf11nx2s-disInline { display: inline !important; }
.nv-xf11nx2s-disFlex { display: flex !important; }
.nv-xf11nx2s-disInlineFlex { display: inline-flex !important; }
.nv-xf11nx2s-disNone { display: none !important; }






/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */


/**
 * Block
 * -------------------------------
 */

/* -- .sectionBlock01 -- */
#topPage .keyVisualArea.sectionBlock01 { padding-top: 620px; }


/* -- .labelTtl -- */
#topPage .labelTtl {
  display: inline-block;
  margin-bottom: 30px;
  padding: 10px 15px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  }


/* -- .newMechanism -- */
#topPage .newMechanism { padding-left: 20px; }

  #topPage .newMechanismInner {
    position: relative;
    padding-right: 360px;
    margin-bottom: 90px;
    }

    #topPage .newMechanismInner > .labelTtl { margin-left: -20px; }

    #topPage .newMechanismInner > p {
      font-size: 2.0rem;
      line-height: 2.0;
      }

    #topPage .newMechanismInner .posAbsolute {
      width: 22.5%;
      top: 0;
      right: 0;
      }

  #topPage .newMechanismImgs {
    margin-left: -80px;
    list-style: none;
    letter-spacing: -.40em;
    }

    #topPage .newMechanismImgs > li {
      display: inline-block;
      width: 50%;
      padding-left: 80px;
      letter-spacing: normal;
      vertical-align: top;
      }

      #topPage .newMechanismImgs > li > dl > dt {
        background-color: #464646;
        display: inline-block;
        padding: 15px 20px 15px 35px;
        position: relative;
        color: #fff;
        font-size: 2.0rem;
        font-weight: 700;
        line-height: 1;
        }

        #topPage .newMechanismImgs > li > dl > dt::after {
          content: "";
          background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #464646 50.5%) no-repeat top left/100% 100%;
          width: 30px;
          height: 100%;
          position: absolute;
          top: 0;
          right: -30px;
          }

      #topPage .newMechanismImgs > li > dl > dd { position: relative; }

        #topPage .newMechanismImgs > li > dl > dd::before {
          content: "";
          background-image: url("/files/cdb/ZZ/products/navi/xf11nx2s/top/2301/zzproducts_navi_xf11nx2s_top_arrow.svg");
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: 100% auto;
          width: 32px;
          height: 101px;
          position: absolute;
          top: 50%;
          left: -55px;
          transform: translateY(-50%);
          }

      #topPage .newMechanismImgs > li:nth-of-type(1) > dl > dd::before { display: none; }


/* -- .comparisonChart -- */
#topPage .comparisonChart { padding-top: 100px; }

  #topPage .comparisonChartTable {
    width: 100%;
    table-layout: fixed;
    }

    #topPage .comparisonChartTable th,
    #topPage .comparisonChartTable td {
      padding: 15px 25px;
      text-align: center;
      vertical-align: middle;
      position: relative;
      z-index: 1;
      font-size: 2.0rem;
      }

      #topPage .comparisonChartTable th::before,
      #topPage .comparisonChartTable th::after,
      #topPage .comparisonChartTable td::before {
        content: "";
        position: absolute;
        z-index: -1;
        }

      #topPage .comparisonChartTable td:nth-of-type(1)::before,
      #topPage .comparisonChartTable th:nth-of-type(1)::before {
        width: calc(100% - 14px);
        height: calc(100% - 14px);
        top: 7px;
        left: 0;
        }

      #topPage .comparisonChartTable td:nth-of-type(2)::before,
      #topPage .comparisonChartTable th:nth-of-type(2)::before {
        width: calc(100% - 28px);
        height: calc(100% - 14px);
        top: 7px;
        left: 14px;
        }

      #topPage .comparisonChartTable td:nth-of-type(3)::before,
      #topPage .comparisonChartTable th:nth-of-type(3)::before {
        width: calc(100% - 14px);
        height: calc(100% - 14px);
        top: 7px;
        right: 0;
        }

    #topPage .comparisonChartTable th {
      padding-bottom: 35px;
      color: #fff;
      font-size: 2.5rem;
      line-height: 1.2;
      }

      #topPage .comparisonChartTable th::before { height: calc(100% - 32px) !important; }

      #topPage .comparisonChartTable th:nth-of-type(2)::before { background-color: #0045cf; }
      #topPage .comparisonChartTable th:nth-of-type(3)::before { background-color: #008cff; }

      #topPage .comparisonChartTable th::after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 18px 14px 0 0;
        bottom: 7px;
        right: 60px;
        }

      #topPage .comparisonChartTable th:nth-of-type(1)::after { display: none; }
      #topPage .comparisonChartTable th:nth-of-type(2)::after { border-color: #0045cf transparent transparent transparent; }
      #topPage .comparisonChartTable th:nth-of-type(3)::after { border-color: #008cff transparent transparent transparent; }

    #topPage .comparisonChartTable td { color: #000; }

      #topPage .comparisonChartTable td::before { background-color: #ccc; }
      #topPage .comparisonChartTable td.comparisonChartTableHighlight::before { background-color: #fff; }

    #topPage .comparisonChartTable td:nth-of-type(1) {
      color: #fff;
      text-align: left;
      }

      #topPage .comparisonChartTable td:nth-of-type(1)::before { background-color: #333; }

  #topPage .comparisonChart .btns01 { padding-top: 80px; }

    #topPage .comparisonChart .btn { width: 100%; }

      #topPage .comparisonChart .btn > a {
        background-color: #33333d;
        border: none;
        position: relative;
        text-decoration: none;
        }

        #topPage .comparisonChart .btn > a::after {
          content: "";
          background-image: url("/files/cdb/ZZ/products/navi/xf11nx2s/top/2301/zzproducts_navi_xf11nx2s_top_btn-arrow.svg");
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: 100% auto;
          width: 20px;
          height: 22px;
          position: absolute;
          top: 50%;
          right: 35px;
          transform: translateY(-50%);
          }

        #topPage .comparisonChart .btn > a > span {
          color: #fff;
          font-size: 2.2rem;
          text-decoration: none;
          }


/* -- .logoLists -- */
#topPage .logoLists {
  margin-left: -35px;
  list-style: none;
  letter-spacing: -.40em;
  text-align: center;
  }

  #topPage .logoLists > li {
    display: inline-block;
    margin-left: 35px;
    letter-spacing: normal;
    vertical-align: top;
    }

    #topPage .logoLists > li img { height: 79px; }


/* -- .newFunctions -- */
#topPage .newFunctions { margin-top: 100px; }

  #topPage .newFunctions > dt {
    display: block;
    margin-bottom: 60px;
    position: relative;
    text-align: center;
    z-index: 1;
    }

    #topPage .newFunctions > dt::before {
      content: "";
      background-color: #fff;
      width: 100%;
      height: 1px;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      }

    #topPage .newFunctions > dt > span {
      background-color: #000;
      display: inline-block;
      padding: 0 45px;
      color: #fff;
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1;
      }

  #topPage .newFunctions > dd { margin-top: 80px; }

  #topPage .newFunctions > dd:nth-of-type(1) { margin-top: 0; }

    #topPage .newFunctions > dd .newFunctionsInner {
      background-color: #333;
      padding: 40px 60px;
      position: relative;
      }

    #topPage .newFunctions > dd .posAbsolute {
      top: 35px;
      right: 30px;
      }

      #topPage .newFunctions > dd .posAbsolute img { height: 43px; }

    #topPage .newFunctions > dd .newFunctionsTtl {
      display: flex;
      margin-bottom: 45px;
      }

    #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsTtl { align-items: center; }

      #topPage .newFunctions > dd .newFunctionsTtl > span {
        display: block;
        color: #fff;
        }

      #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(1) {
        width: 130px;
        font-size: 8.3rem;
        line-height: 1;
        }

      #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) {}

        #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) > span { display: block; }

        #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) > span:nth-of-type(1) {
          font-size: 2.5rem;
          font-weight: 700;
          line-height: 1.7;
          }

        #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) > span:nth-of-type(2) {
          margin-top: 10px;
          font-size: 1.6rem;
          }

    #topPage .newFunctions > dd .newFunctionsImgs {
      list-style: none;
      letter-spacing: -.40em;
      }

    #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs { margin-bottom: 20px; }

      #topPage .newFunctions > dd .newFunctionsImgs > li {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
        }

      #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs > li:nth-of-type(1) { padding-left: 35px; }

      #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs > li:nth-of-type(2) { padding-left: 75px; }

        #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dt {
          display: block;
          margin-left: -15px;
          letter-spacing: -.40em;
          }

          #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dt > span {
            display: inline-block;
            margin-left: 15px;
            letter-spacing: normal;
            vertical-align: bottom;
            }

            #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dt > span img { width: 243px; }

        #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dd {
          margin-top: 25px;
          color: #fff;
          font-size: 1.6rem;
          line-height: 1.6;
          }

    #topPage .newFunctions > dd .dlBlock { margin-top: 35px; }

      #topPage .newFunctions > dd .dlBlock .link01  { color: #fff; }

        #topPage .newFunctions > dd .dlBlock .link01.link01Blank:after { background-image: url(/files/cdb/ZZ/products/common/zzproducts_common_icon-blank-wt.png); }

      #topPage .newFunctions > dd .dlBlock .caution  { color: #808080; }



      

        
/**
 * ================================================================================
 * Other Settings
 * ================================================================================
 */


/* -- Font Family -- */
.ffOswald { font-family: "Oswald", sans-serif !important; }








@media only screen and (min-width: 0px) and (max-width: 767px) {
  
  
/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */


/**
 * Block
 * -------------------------------
 */

/* -- .sectionBlock01 -- */
#topPage .keyVisualArea.sectionBlock01 { padding-top: 0; }
  
  
/* -- .labelTtl -- */
#topPage .labelTtl {
  margin-bottom: 15px;
  padding: 5px 10px;
  font-size: 1.7rem;
  }


/* -- .newMechanism -- */
#topPage .newMechanism { padding-left: 0; }

  #topPage .newMechanismInner {
    padding-right: 0;
    margin-bottom: 40px;
    }

    #topPage .newMechanismInner > .labelTtl { margin-left: 0; }

    #topPage .newMechanismInner > p {
      font-size: 1.3rem;
      line-height: 1.8;
      }

    #topPage .newMechanismInner .posAbsolute {
      width: 100%;
      margin-top: 20px;
      position: static !important;
      text-align: center;
      }
  
      #topPage .newMechanismInner .posAbsolute img { width: 60%; }

  #topPage .newMechanismImgs {
    margin-left: 0;
    margin-top: -40px;
    }

    #topPage .newMechanismImgs > li {
      width: 100%;
      padding-left: 0;
      padding-top: 40px;
      }

      #topPage .newMechanismImgs > li > dl > dt {
        padding: 8px 10px 8px 15px;
        font-size: 1.5rem;
        }

        #topPage .newMechanismImgs > li > dl > dt::after {
          width: 15px;
          right: -15px;
          }

      #topPage .newMechanismImgs > li > dl > dd {}

        #topPage .newMechanismImgs > li > dl > dd::before {
          width: calc(32px * 0.6);
          height: calc(101px * 0.6);
          top: -75px;
          left: 50%;
          transform: translate(-50%, 0) rotate(90deg);
          }


/* -- .comparisonChart -- */
#topPage .comparisonChart { padding-top: 40px; }

  #topPage .comparisonChartTable {}

    #topPage .comparisonChartTable th,
    #topPage .comparisonChartTable td {
      padding: calc(15px * 0.5) calc(25px * 0.2);
      font-size: 1.2rem;
      }

      #topPage .comparisonChartTable td:nth-of-type(1)::before,
      #topPage .comparisonChartTable th:nth-of-type(1)::before {
        width: calc(100% - 14px * 0.2);
        height: calc(100% - 14px * 0.5);
        top: calc(7px * 0.5);
        }

      #topPage .comparisonChartTable td:nth-of-type(2)::before,
      #topPage .comparisonChartTable th:nth-of-type(2)::before {
        width: calc(100% - 28px * 0.2);
        height: calc(100% - 14px * 0.5);
        top: calc(7px * 0.5);
        left: calc(14px * 0.2);
        }

      #topPage .comparisonChartTable td:nth-of-type(3)::before,
      #topPage .comparisonChartTable th:nth-of-type(3)::before {
        width: calc(100% - 14px * 0.2);
        height: calc(100% - 14px * 0.5);
        top: calc(7px * 0.5);
        }

    #topPage .comparisonChartTable th {
      padding-bottom: calc(35px * 0.5);
      font-size: 1.6rem;
      }

      #topPage .comparisonChartTable th::before { height: calc(100% - 32px * 0.5) !important; }

      #topPage .comparisonChartTable th::after {
        border-width: calc(18px * 0.5) calc(14px * 0.5) 0 0;
        bottom: calc(7px * 0.5);
        right: calc(60px * 0.2);
        }

  #topPage .comparisonChart .btns01 { padding-top: 40px; }

      #topPage .comparisonChart .btn > a::after {
        width: calc(20px * 0.6);
        height: calc(22px * 0.6);
        right: 15px;
        }

      #topPage .comparisonChart .btn > a > span { font-size: 1.5rem; }


/* -- .logoLists -- */
#topPage .logoLists {
  margin-left: 0;
  margin-top: -10px;
  }

  #topPage .logoLists > li {
    width: 60%;
    margin-left: 0;
    margin-top: 10px;
    }

    #topPage .logoLists > li img { height: auto; }


/* -- .newFunctions -- */
#topPage .newFunctions { margin-top: 40px; }

  #topPage .newFunctions > dt { margin-bottom: 30px; }

    #topPage .newFunctions > dt > span {
      padding: 0 20px;
      font-size: 1.8rem;
      }

  #topPage .newFunctions > dd { margin-top: 40px; }

    #topPage .newFunctions > dd .newFunctionsInner { padding: 14px 20px; }

    #topPage .newFunctions > dd .posAbsolute {
      top: 15px;
      right: 15px;
      }

      #topPage .newFunctions > dd .posAbsolute img {
        width: auto;
        height: calc(43px * 0.8);
        }

    #topPage .newFunctions > dd .newFunctionsTtl {
      display: block;
      margin-bottom: 25px;
      }

      #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(1) {
        margin-bottom: 15px;
        width: 100%;
        font-size: 4.5rem;
        }

      #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) {}

        #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) > span:nth-of-type(1) {
          font-size: 1.6rem;
          line-height: 1.6;
          }

        #topPage .newFunctions > dd .newFunctionsTtl > span:nth-of-type(2) > span:nth-of-type(2) {
          margin-top: 5px;
          font-size: 1.2rem;
          }

    #topPage .newFunctions > dd .newFunctionsImgs {}

    #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs { margin-bottom: 10px; }
  
      #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs > li { width: 100%; }

      #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs > li:nth-of-type(1) {
        padding-left: 0;
        margin-bottom: 30px;
        }

      #topPage .newFunctions > dd:nth-of-type(2) .newFunctionsImgs > li:nth-of-type(2) { padding-left: 0; }

        #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dt {
          margin-left: 0;
          margin-top: -15px;
          }

          #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dt > span {
            margin-left: 0;
            margin-top: 15px;
            vertical-align: top;
            }

            #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dt > span img { width: 100%; }

        #topPage .newFunctions > dd .newFunctionsImgs > li > dl > dd {
          margin-top: 10px;
          font-size: 1.2rem;
          }

    #topPage .newFunctions > dd .dlBlock { margin-top: 20px; }


}