@charset "utf-8";


/**
 * Top Page Style
 * ================================================================================
 * Table of Contents:
 *
 * Top Page Settings
 * ================================================================================
 */






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


#specialSpTop {
  background-color: #000;
  padding-bottom: 160px;
  color: #fff;
  }



/**
 * Parts
 * -------------------------------
 */

/* -- .pWrapper -- */
#specialSpTop .pWrapper {
  width: 1230px;
  margin: 0 auto;
  position: relative;
  }


/* -- .pSecTtl -- */
#specialSpTop .pSecTtl {}

  #specialSpTop .pSecTtl > span {
    display: block;
    text-align: center;
    line-height: 1;
    }

    #specialSpTop .pSecTtl > span img { height: 24px; }



/**
 * UCL
 * -------------------------------
 */

#specialSpTop #ucl {
  background-color: #cdac70;
  display: flex;
  height: 73px;
  align-items: center;
  justify-content: center;
  text-align: center;
  }

  #specialSpTop #ucl > dl {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    }

    #specialSpTop #ucl > dl > dt { display: block; }

      #specialSpTop #ucl > dl > dt img { width: 264px; }

    #specialSpTop #ucl > dl > dd {
      padding-left: 25px;
      margin-left: 25px;
      position: relative;
      color: #000;
      font-size: 17px;
      font-weight: 700;
      }

      #specialSpTop #ucl > dl > dd:before {
        content: "";
        background-color: #000;
        width: 2px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        }



/**
 * Main Visual
 * -------------------------------
 */

#specialSpTop #mv {
  width: 1230px;
  margin: 0 auto;
  }


  /* -- .mvImg -- */
  #specialSpTop #mv .mvImg {}

    #specialSpTop #mv .mvImg > span { display: block; }

      #specialSpTop #mv .mvImg > span img { width: 100%; }


  /* -- .mvBar -- */
  #specialSpTop #mv .mvBar {
    width: 1200px;
    margin: 0 auto;
    }

    #specialSpTop #mv .mvBar > span {
      background: -webkit-linear-gradient(left,  rgba(205,172,112,0) 0%,rgba(205,172,112,1) 10%,rgba(205,172,112,1) 90%,rgba(205,172,112,0) 100%);
      background: linear-gradient(to right,  rgba(205,172,112,0) 0%,rgba(205,172,112,1) 10%,rgba(205,172,112,1) 90%,rgba(205,172,112,0) 100%);
      display: block;
      width: 100%;
      height: 1px;
      }


  /* -- .mvTtl -- */
  #specialSpTop #mv .mvTtl {
    margin: 65px 0 70px 0;
    position: relative;
    }

    #specialSpTop #mv .mvTtl > span {
      display: block;
      text-align: center;
      line-height: 1;
      }

    #specialSpTop #mv .mvTtl > span:nth-of-type(1) { margin-bottom: 60px; }

      #specialSpTop #mv .mvTtl > span:nth-of-type(1) img { width: 742px; }
      #specialSpTop #mv .mvTtl > span:nth-of-type(2) img { width: 796px; }



/**
 * Lineup
 * -------------------------------
 */

#specialSpTop #lineup {
  padding-bottom: 210px;
  position: relative;
  }

  #specialSpTop #lineup:before,
  #specialSpTop #lineup:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    }

  #specialSpTop #lineup:before {
    background-image: url("/files/cdb/ZZ/special/speaker/top/2106/zz_special_speaker_top_spcnt-bg.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    width: 690px;
    height: 114px;
    }

  #specialSpTop #lineup:after {
    background: -webkit-linear-gradient(left,  rgba(205,172,112,0) 0%,rgba(205,172,112,1) 10%,rgba(205,172,112,1) 90%,rgba(205,172,112,0) 100%);
    background: linear-gradient(to right,  rgba(205,172,112,0) 0%,rgba(205,172,112,1) 10%,rgba(205,172,112,1) 90%,rgba(205,172,112,0) 100%);
    width: 1200px;
    height: 1px;
    }


  /* -- .pSecTtl -- */
  #specialSpTop #lineup .pSecTtl { margin-bottom: 70px; }


  /* -- .lineupLists -- */
  #specialSpTop #lineup .lineupLists {
    padding: 0 165px;
    list-style: none;
    }

    #specialSpTop #lineup .lineupLists > li { margin-bottom: 30px; }

    #specialSpTop #lineup .lineupLists > li:nth-last-of-type(1) { margin-bottom: 0; }

      #specialSpTop #lineup .lineupLists > li > * {
        background-color: #272727;
        display: block;
        padding: 11px 100px 11px 11px;
        border: 1px solid #cdac70;
        position: relative;
        color: #fff;
        text-decoration: none;
        }

        #specialSpTop #lineup .lineupLists > li > *:before,
        #specialSpTop #lineup .lineupLists > li > *:after {
          content: "";
          position: absolute;
          top: 50%;
          }

        #specialSpTop #lineup .lineupLists > li > *:before {
          background-color: #000;
          width: 50px;
          height: 50px;
          right: 0;
          z-index: 2;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          }

        #specialSpTop #lineup .lineupLists > li > *:after {
          width: 14px;
          height: 14px;
          border-top: 1px solid #cdac70;
          border-right: 1px solid #cdac70;
          right: 20px;
          z-index: 2;
          -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
          }

        #specialSpTop #lineup .lineupLists > li .lineupListsInner {
          display: flex;
          align-items: center;
          }

          #specialSpTop #lineup .lineupLists > li .lineupListsInner > dt {
            display: block;
            width: 31%;
            }

          #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd {
            width: 69%;
            padding-left: 55px;
            }

            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtl > span { display: block; }

            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtlSub {
              margin-bottom: 10px;
              font-size: 14.5px;
              font-weight: 300;
              }

            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtlMain {
              color: #cdac70;
              font-size: 24px;
              font-weight: 500;
              }
            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtlMain.ffBarlowSC {
              font-size: 30px;
              font-weight: 400;
              letter-spacing: 0.15em;
              }



/**
 * Special Contents
 * -------------------------------
 */

#specialSpTop #spCnt { padding: 100px 0 150px 0; }


  /* -- .pSecTtl -- */
  #specialSpTop #spCnt .pSecTtl { margin-bottom: 80px; }


  /* -- .spCntLists -- */
  #specialSpTop #spCnt .spCntLists {
    list-style: none;
    letter-spacing: -.40em;
    }

    #specialSpTop #spCnt .spCntLists > li {
      display: inline-block;
      width: 50%;
      letter-spacing: normal;
      vertical-align: top;
      }

      #specialSpTop #spCnt .spCntLists > li > * {
        display: block;
        position: relative;
        }

        #specialSpTop #spCnt .spCntLists > li > * img { width: 100%; }

        #specialSpTop #spCnt .spCntLists > li > *:before,
        #specialSpTop #spCnt .spCntLists > li > *:after {
          content: "";
          position: absolute;
          }

        #specialSpTop #spCnt .spCntLists > li > *:before {
          background-color: #000;
          width: 50px;
          height: 50px;
          right: 0;
          bottom: 0;
          z-index: 2;
          }

        #specialSpTop #spCnt .spCntLists > li > *:after {
          width: 14px;
          height: 14px;
          border-top: 1px solid #cdac70;
          border-right: 1px solid #cdac70;
          right: 20px;
          bottom: 10px;
          z-index: 2;
          -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
          }



/**
 * Fitting
 * -------------------------------
 */

#specialSpTop #fitting {
  background-image: url("/files/cdb/ZZ/special/speaker/top/2106/zz_special_speaker_top_fitting-bg01.jpg");
  background-repeat: repeat;
  background-size: 100px auto;
  padding: 90px 0 100px 0;
  position: relative;
  }

  #specialSpTop #fitting:before {
    content: "";
    background-image: url("/files/cdb/ZZ/special/speaker/top/2106/zz_special_speaker_top_fitting-bg02.png");
    background-repeat: no-repeat;
    background-position: right 50%;
    background-size: auto 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    }

  
  /* -- .fittingBtn -- */
  #specialSpTop #fitting .fittingBtn {
    text-align: center;
    position: relative;
    z-index: 2;
    }

    #specialSpTop #fitting .fittingBtn > a {
      display: inline-block;
      padding: 40px 170px;
      border: 1px solid #cdac70;
      position: relative;
      color: #fff;
      font-weight: 300;
      font-size: 22px;
      line-height: 1;
      text-decoration: none;
      }

      #specialSpTop #fitting .fittingBtn > a:after {
        content: "";
        width: 14px;
        height: 14px;
        border-top: 1px solid #cdac70;
        border-right: 1px solid #cdac70;
        position: absolute;
        top: 50%;
        right: 30px;
        z-index: 2;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
        }

        #specialSpTop #fitting .fittingBtn > a > span { color: #cdac70; }








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


#specialSpTop { padding-bottom: 60px; }



/**
 * Parts
 * -------------------------------
 */

/* -- .pWrapper -- */
#specialSpTop .pWrapper {
  width: 100%;
  padding: 0 15px;
  }


/* -- .pSecTtl -- */
#specialSpTop .pSecTtl {}

  #specialSpTop .pSecTtl > span img {
    width: auto;
    height: calc(100vw * (24 / 640));
    }



/**
 * UCL
 * -------------------------------
 */

#specialSpTop #ucl {
  display: block;
  height: auto;
  padding: 5px 10px 10px 10px;
  }

  #specialSpTop #ucl > dl { display: block; }

    #specialSpTop #ucl > dl > dt {}

      #specialSpTop #ucl > dl > dt img { width: 60%; }

    #specialSpTop #ucl > dl > dd {
      padding-left: 0;
      margin-left: 0;
      padding-top: 10px;
      font-size: 12px;
      }

      #specialSpTop #ucl > dl > dd:before {
        width: 20px;
        height: 1px;
        left: 50%;
        top: 0;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        }



/**
 * Main Visual
 * -------------------------------
 */

#specialSpTop #mv {
  width: 100%;
  margin: 0 auto;
  }


  /* -- .mvImg -- */
  #specialSpTop #mv .mvImg {}


  /* -- .mvBar -- */
  #specialSpTop #mv .mvBar {
    width: 100%;
    padding: 0 15px;
    }

    #specialSpTop #mv .mvBar > span { width: 100%; }


  /* -- .mvTtl -- */
  #specialSpTop #mv .mvTtl {  margin: 30px 0 35px 0; }

    #specialSpTop #mv .mvTtl > span {
      display: block;
      text-align: center;
      line-height: 1;
      }

    #specialSpTop #mv .mvTtl > span:nth-of-type(1) { margin-bottom: 30px; }

      #specialSpTop #mv .mvTtl > span:nth-of-type(1) img { width: calc(100vw * (425 / 640)); }
      #specialSpTop #mv .mvTtl > span:nth-of-type(2) img { width: calc(100vw * (442 / 640)); }



/**
 * Lineup
 * -------------------------------
 */

#specialSpTop #lineup { padding-bottom: 80px; }

  #specialSpTop #lineup:before {
    width: calc(690px / 2);
    height: calc(114px / 2);
    }

  #specialSpTop #lineup:after {
    width: calc(100% - 30px);
    }


  /* -- .pSecTtl -- */
  #specialSpTop #lineup .pSecTtl { margin-bottom: 35px; }


  /* -- .lineupLists -- */
  #specialSpTop #lineup .lineupLists { padding: 0; }

    #specialSpTop #lineup .lineupLists > li { margin-bottom: 15px; }

      #specialSpTop #lineup .lineupLists > li > * { padding: 5px 30px 5px 5px; }

        #specialSpTop #lineup .lineupLists > li > *:before {
          width: 22px;
          height: 22px;
          }

        #specialSpTop #lineup .lineupLists > li > *:after {
          width: 6px;
          height: 6px;
          right: 10px;
          }

        #specialSpTop #lineup .lineupLists > li .lineupListsInner { height: 80px; }

          #specialSpTop #lineup .lineupLists > li .lineupListsInner > dt {
            display: block;
            width: 35%;
            }

          #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd {
            width: 65%;
            padding-left: 15px;
            }

            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtl > span { display: block; }

            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtlSub {
              margin-bottom: 5px;
              font-size: 10px;
              }

            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtlMain { font-size: 13px; }
            #specialSpTop #lineup .lineupLists > li .lineupListsInner > dd .lineupListsTtlMain.ffBarlowSC { font-size: 15px; }



/**
 * Special Contents
 * -------------------------------
 */

#specialSpTop #spCnt { padding: 50px 0 60px 0; }


  /* -- .pSecTtl -- */
  #specialSpTop #spCnt .pSecTtl { margin-bottom: 40px; }


  /* -- .spCntLists -- */
  #specialSpTop #spCnt .spCntLists {}

    #specialSpTop #spCnt .spCntLists > li {
      width: 100%;
      margin-bottom: 5px;
      }

      #specialSpTop #spCnt .spCntLists > li > *:before {
        width: 22px;
        height: 22px;
        }

      #specialSpTop #spCnt .spCntLists > li > *:after {
        width: 6px;
        height: 6px;
        right: 10px;
        bottom: 4px;
        }



/**
 * Fitting
 * -------------------------------
 */

#specialSpTop #fitting {
  background-size: 50px auto;
  padding: 30px 0;
  }

  
  /* -- .fittingBtn -- */
  #specialSpTop #fitting .fittingBtn {
    text-align: center;
    position: relative;
    z-index: 2;
    }

    #specialSpTop #fitting .fittingBtn > a {
      padding: 20px 40px;
      font-size: 14px;
      }

      #specialSpTop #fitting .fittingBtn > a:after {
        width: 7px;
        height: 7px;
        right: 15px;
        }


}