@charset 'utf-8';

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&family=Montserrat:wght@600&display=swap');



/**
 * Top Page Style
 * ================================================================================
 * Table of Contents:
 *
 * Basic Structure
 * Parts Settings
 * Content Settings
 * ================================================================================
 */



/**
 * ================================================================================
 * Basic Structure
 * ================================================================================
 */

/* -- Layout-- */
.header {
  background-color: #fff;
  position: relative;
  z-index: 500;
  }

#headerNavArea {
  position: relative;
  z-index: 499;
}

.dirpath {
  margin-top: 0;
}

.footer {
  margin-top: 0 !important;
}

#productsSpMetiosoundTop {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  background-color: #000;
  color: #ccc;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'verdana', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#productsSpMetiosoundTop *,
#productsSpMetiosoundTop *::before,
#productsSpMetiosoundTop *::after {
  box-sizing: border-box;
}

#productsSpMetiosoundTop img {
  width: 100%;
}

#productsSpMetiosoundTop a {
  display: inline-block;
  opacity: 1;
  color: #bb9c5c;
  transition: opacity 0.2s ease-in;
  text-decoration: underline;
}

#productsSpMetiosoundTop a:hover {
  opacity: 0.6;
}



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

/**
 * Font Family
 * -------------------------------
 */

#productsSpMetiosoundTop .c-ffShipporiMin {
  font-family: 'Shippori Mincho', serif;
}

#productsSpMetiosoundTop .c-ffMontserrat {
  font-family: 'Montserrat', serif;
}



/**
 * ================================================================================
 * Parts Settings
 * ================================================================================
 */

/**
 * Wrapper
 * -------------------------------
 */

#productsSpMetiosoundTop .p-wrapper {
  width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .p-wrapper {
    width: 100%;
    padding: 0 15px;
  }
}


/**
 * Banner
 * -------------------------------
 */

#productsSpMetiosoundTop .p-banner {
  margin-top: -20px;
}

#productsSpMetiosoundTop .p-banner > li {
  margin-top: 20px;
}

#productsSpMetiosoundTop .p-banner > li > * {
  display: block;
  position: relative;
  z-index: 1;
  color: #f2f2f2;
  text-decoration: none;
}

#productsSpMetiosoundTop .p-bannerIcon::after {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

#productsSpMetiosoundTop .p-bannerIconArrow::after {
  width: 56px;
  height: 40px;
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_icon-arrow.svg');
}

#productsSpMetiosoundTop .p-bannerTtl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#productsSpMetiosoundTop .p-bannerTtl > * {
  display: block;
  width: 100%;
}

#productsSpMetiosoundTop .p-bannerTtlMain {
  font-size: 3.8rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
}

#productsSpMetiosoundTop .p-bannerTtlSub {
  margin-top: 10px;
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

#productsSpMetiosoundTop .p-bannerImg {
  position: relative;
  z-index: -1;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .p-banner {
    margin-top: -10px;
  }

  #productsSpMetiosoundTop .p-banner > li {
    margin-top: 10px;
  }

  #productsSpMetiosoundTop .p-bannerIcon::after {
    right: 10px;
  }

  #productsSpMetiosoundTop .p-bannerIconArrow::after {
    width: calc(56px * 0.4);
    height: calc(40px * 0.4);
  }

  #productsSpMetiosoundTop .p-bannerTtlMain {
    font-size: 1.6rem;
    letter-spacing: 0.07em;
  }

  #productsSpMetiosoundTop .p-bannerTtlSub {
    margin-top: 3px;
    font-size: 1.0rem;
    letter-spacing: 0.05em;
  }
}



/**
 * ================================================================================
 * Content Settings
 * ================================================================================
 */

/**
 * Loader
 * -------------------------------
 */

#productsSpMetiosoundTop .loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top-loader.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 35px auto;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .loader {
    background-size: 30px auto;
  }
}


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

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

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

#productsSpMetiosoundTop .ucl > dl > dt {
  display: block;
}

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

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

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

@media only screen and (max-width: 767px) { 
  #productsSpMetiosoundTop .ucl {
    display: block;
    height: auto;
    padding: 5px 10px 10px 10px;
  }

  #productsSpMetiosoundTop .ucl > dl {
    display: block;
  }

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

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

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

@media only screen and (max-width: 767px) { 
}


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

#productsSpMetiosoundTop .mv {
  position: relative;
  z-index: 1;
  line-height: 1;
  overflow: hidden;
}

#productsSpMetiosoundTop .mvOp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

#productsSpMetiosoundTop .mvOpBg,
#productsSpMetiosoundTop .mvOpBgInner,
#productsSpMetiosoundTop .mvOpLogo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
}

#productsSpMetiosoundTop .mvOpBg {
  z-index: -1;
  transition-duration: 1.0s;
}

#productsSpMetiosoundTop .mvOpBgInner {
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_mv-op-bg.jpg'); 
  animation: light-rotate 50s linear infinite;
  will-change: opacity transform;
}

#productsSpMetiosoundTop .mvOpLogo {
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_mv-op-logo.png');
  transition-duration: 1.5s;
}

#productsSpMetiosoundTop .mvTtl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#productsSpMetiosoundTop .mvTtl img {
  width: calc(100vw * (881 / 1700));
}

#productsSpMetiosoundTop .mvBanner {
  position: absolute;
  left: 50%;
  bottom: 45px;
  transform: translateX(-50%);
  z-index: 2;
}

#productsSpMetiosoundTop .mvBanner img {
  width: calc(100vw * (832 / 1700));
}

@keyframes light-rotate {
	0% {
		transform: rotate(0) scale(1.05, 1.05);
    opacity: 1.0;
	}
  2.5% {
		transform: rotate(9deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  5% {
		transform: rotate(18deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  7.5% {
		transform: rotate(27deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  10% {
		transform: rotate(36deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  12.5% {
		transform: rotate(45deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  15% {
		transform: rotate(54deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  17.5% {
		transform: rotate(63deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  20% {
		transform: rotate(72deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  22.5% {
		transform: rotate(81deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  25% {
		transform: rotate(90deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  27.5% {
		transform: rotate(99deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  30% {
		transform: rotate(108deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  32.5% {
		transform: rotate(117deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  35% {
		transform: rotate(126deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  37.5% {
		transform: rotate(135deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  40% {
		transform: rotate(144deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  42.5% {
		transform: rotate(153deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  45% {
		transform: rotate(162deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  47.5% {
		transform: rotate(171deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  50% {
		transform: rotate(180deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  52.5% {
		transform: rotate(189deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  55% {
		transform: rotate(198deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  57.5% {
		transform: rotate(207deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  60% {
		transform: rotate(216deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  62.5% {
		transform: rotate(225deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  65% {
		transform: rotate(234deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  67.5% {
		transform: rotate(243deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  70% {
		transform: rotate(252deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  72.5% {
		transform: rotate(261deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  75% {
		transform: rotate(270deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  77.5% {
		transform: rotate(279deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  80% {
		transform: rotate(288deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  82.5% {
		transform: rotate(297deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  85% {
		transform: rotate(306deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  87.5% {
		transform: rotate(315deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  90% {
		transform: rotate(324deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  92.5% {
		transform: rotate(333deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  95% {
		transform: rotate(342deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
  97.5% {
		transform: rotate(351deg) scale(0.95, 0.95);
    opacity: 0.7;
	}
  100% {
		transform: rotate(360deg) scale(1.05, 1.05);
    opacity: 1.0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
  #productsSpMetiosoundTop .mvTtl img {
    width: calc(1280px * (881 / 1700));
  }

  #productsSpMetiosoundTop .mvBanner img {
    width: calc(1280px * (832 / 1700));
  }
}
@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .mvOpBg,
  #productsSpMetiosoundTop .mvOpBgInner,
  #productsSpMetiosoundTop .mvOpLogo {
    width: 140%;
    margin-left: -20%;
  }

  #productsSpMetiosoundTop .mvTtl {
    top: auto;
    bottom: calc(100vw * (110 / 640));
    left: 50%;
    transform: translate(-50%, 0);
  }

  #productsSpMetiosoundTop .mvTtl img {
    width: calc(100vw * (569 / 640));
    max-width: initial;
  }

  #productsSpMetiosoundTop .mvBanner {
    bottom: 0;
  }

  #productsSpMetiosoundTop .mvBanner img {
    width: calc(100vw * (550 / 640));
    max-width: initial;
  }
}


/**
 * Lead
 * -------------------------------
 */

#productsSpMetiosoundTop .lead {
  margin-top: 90px;
  margin-bottom: 95px;
}

#productsSpMetiosoundTop .leadTtl {
  margin-bottom: 50px;
  text-align: center;
}

#productsSpMetiosoundTop .leadTtl > span {
  display: block;
}

#productsSpMetiosoundTop .leadTtlMain {
  margin-top: 15px;
  font-size: 11.3rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
}

#productsSpMetiosoundTop .leadTtlSub {
  margin-left: 60px;
  font-size: 4.0rem;
  line-height: 1.6;
  letter-spacing: 0.3em;
}

#productsSpMetiosoundTop .leadInner {
  text-align: center;
}

#productsSpMetiosoundTop .leadInner > dt {
  display: inline-block;
  width: 462px;
  margin-top: 70px;
}

#productsSpMetiosoundTop .leadInner > dd {
  font-size: 2.6rem;
  line-height: 2.4;
  letter-spacing: 0.07em;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .lead {
    margin-top: 35px;
    margin-bottom: 40px;
  }

  #productsSpMetiosoundTop .leadTtl {
    margin-bottom: 25px;
  }

  #productsSpMetiosoundTop .leadTtlMain {
    margin-top: 10px;
    font-size: 4.0rem;
  }

  #productsSpMetiosoundTop .leadTtlSub {
    margin-left: 10px;
    font-size: 1.6rem;
    letter-spacing: 0.3em;
  }

  #productsSpMetiosoundTop .leadInner > dt {
    width: calc(462px * 0.6);
    margin-top: 30px;
  }

  #productsSpMetiosoundTop .leadInner > dd {
    font-size: 1.4rem;
    line-height: 2.0;
  }
}


/**
 * Overview
 * -------------------------------
 */

#productsSpMetiosoundTop .overview {
  margin-bottom: 170px;
}

#productsSpMetiosoundTop .overviewTtl {
  position: relative;
  margin-bottom: 50px;
  text-align: center;
}

#productsSpMetiosoundTop .overviewTtl::before,
#productsSpMetiosoundTop .overviewTtl::after {
  position: absolute;
  top: 15px;
  width: calc(50% - 200px);
  height: 2px;
  content: '';
}

#productsSpMetiosoundTop .overviewTtl::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,153,214,0) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .overviewTtl::after {
  right: 0;
  background: linear-gradient(275deg, rgba(0,153,214,0) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .overviewTtl > span {
  display: block;
}

#productsSpMetiosoundTop .overviewTtlMain img {
  width: 280px;
}

#productsSpMetiosoundTop .overviewTtlSub {
  margin-top: 20px;
  font-size: 2.0rem;
  line-height: 1.4;
  letter-spacing: 1.6rem;
}

#productsSpMetiosoundTop .overviewInner {
  margin-bottom: 125px;
  text-align: center;
}

#productsSpMetiosoundTop .overviewInner > dt {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 140px;
  margin-left: -145px;
}

#productsSpMetiosoundTop .overviewItem {
  display: inline-block;
  position: relative;
  margin-left: 145px;
}

#productsSpMetiosoundTop .overviewItem::before {
  position: absolute;
  top: 50%;
  left: -95px;
  transform: translateY(-50%);
  width: 52px;
  height: 102px;
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_overview-arrow.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

#productsSpMetiosoundTop .overviewItem:nth-of-type(1)::before {
  display: none;
}

#productsSpMetiosoundTop .overviewItem > span:not(.overviewItemTtl) {
  display: block;
}

#productsSpMetiosoundTop .overviewItemTtl {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 8px 15px;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1;
}

#productsSpMetiosoundTop .overviewItem:nth-of-type(1) .overviewItemTtl {
  background-color: #808080;
}

#productsSpMetiosoundTop .overviewItem:nth-of-type(2) .overviewItemTtl {
  background: linear-gradient(90deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .overviewItemTtl::before {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: -1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #000;
  content: '';
}

#productsSpMetiosoundTop .overviewItemImg {
  margin-top: 35px;
}

#productsSpMetiosoundTop .overviewItemImg img {
  width: 508px;
}

#productsSpMetiosoundTop .overviewItemTxt {
  margin-top: 45px;
  font-size: 1.8rem;
  font-weight: 300;
}

#productsSpMetiosoundTop .overviewInner > dd {
  font-size: 2.4rem;
  line-height: 2.2;
}

#productsSpMetiosoundTop .overviewMovie {
  margin-bottom: 240px;
}

#productsSpMetiosoundTop .overviewKv {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
}

#productsSpMetiosoundTop .overviewBanner {
  padding-top: 180px;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
  #productsSpMetiosoundTop .overviewKv {
    left: 0;
    margin-left: 0;
    width: 1280px;
  }
}
@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .overview {
    margin-bottom: 60px;
  }

  #productsSpMetiosoundTop .overviewTtl {
    margin-bottom: 25px;
  }

  #productsSpMetiosoundTop .overviewTtl::before,
  #productsSpMetiosoundTop .overviewTtl::after {
    top: 12px;
    width: calc(50% - 100px);
    height: 2px;
  }

  #productsSpMetiosoundTop .overviewTtlMain img {
    width: calc(280px * 0.6);
  }

  #productsSpMetiosoundTop .overviewTtlSub {
    margin-top: 10px;
    font-size: 1.2rem;
    letter-spacing: 0.8rem;
  }

  #productsSpMetiosoundTop .overviewInner {
    margin-bottom: 45px;
  }

  #productsSpMetiosoundTop .overviewInner > dt {
    display: block;
    margin-bottom: 40px;
    margin-left: 0;
  }

  #productsSpMetiosoundTop .overviewItem {
    display: block;
    margin-left: 0;
    margin-top: 80px;
  }
  
  #productsSpMetiosoundTop .overviewItem:nth-of-type(1) {
    margin-top: 0;
  }

  #productsSpMetiosoundTop .overviewItem::before {
    position: absolute;
    top: -67px;
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
    width: calc(52px * 0.5);
    height: calc(102px * 0.5);
  }

  #productsSpMetiosoundTop .overviewItemTtl {
    padding: 5px 10px;
    font-size: 1.3rem;
  }

  #productsSpMetiosoundTop .overviewItemImg {
    margin-top: 15px;
  }

  #productsSpMetiosoundTop .overviewItemImg img {
    width: 80%;
  }
  
  #productsSpMetiosoundTop .overviewItemTxt {
    margin-top: 20px;
    font-size: 1.1rem;
  }

  #productsSpMetiosoundTop .overviewInner > dd {
    font-size: 1.2rem;
    line-height: 1.8;
  }

  #productsSpMetiosoundTop .overviewMovie {
    margin-bottom: 60px;
  }

  #productsSpMetiosoundTop .overviewBanner {
    padding-top: 55px;
  }
}


/**
 * Features
 * -------------------------------
 */

#productsSpMetiosoundTop .features {
  margin-bottom: 250px;
}

#productsSpMetiosoundTop .featuresTtl {
  position: relative;
  padding-bottom: 80px;
  margin-bottom: 150px;
  text-align: center;
}

#productsSpMetiosoundTop .featuresTtl > span {
  display: block;
}

#productsSpMetiosoundTop .featuresTtlMain {
  font-size: 10.0rem;
  line-height: 1.2;
  letter-spacing: 0.25em;
}

#productsSpMetiosoundTop .featuresTtlSub {
  margin-top: 30px;
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.15em;
}

#productsSpMetiosoundTop .featuresTtlBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .featuresLists > li {
  margin-top: 370px;
}

#productsSpMetiosoundTop .featuresLists > li:nth-of-type(1) {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

#productsSpMetiosoundTop .featuresListsTtl {
  position: relative;
  margin-bottom: 140px;
}

#productsSpMetiosoundTop .featuresListsTtlNo {
  position: absolute;
  top: -125px;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTtlNo {
  right: 0;
  text-align: right;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTtlNo {
  left: 0;
  text-align: left;
}

#productsSpMetiosoundTop .featuresListsTtlNo > span {
  display: block;
}

#productsSpMetiosoundTop .featuresListsTtlNoMain {
  font-size: 23.0rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

#productsSpMetiosoundTop .featuresListsTtlNoSub {
  margin-top: 25px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

#productsSpMetiosoundTop .featuresListsTtlMain {
  font-size: 3.8rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTtlMain {
  text-align: left;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTtlMain {
  text-align: right;
}

#productsSpMetiosoundTop .featuresListsInner {
  position: relative;
}

#productsSpMetiosoundTop .featuresListsSliderMain {
  position: absolute;
  top: -115px;
  z-index: 2;
  width: 800px;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsSliderMain {
  left: 0;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsSliderMain {
  right: 0;
}

#productsSpMetiosoundTop .featuresListsSliderNav {
  position: absolute;
  bottom: -170px;
  display: flex;
  width: calc(100% + 20px);
  margin-left: -20px;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsSliderNav {
  justify-content: flex-end;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsSliderNav {
  justify-content: flex-start;
}

#productsSpMetiosoundTop .featuresListsSliderNav > li {
  margin-left: 20px;
  width: 120px;
  padding: 3px;
  transition: 0.2s opacity ease-in;
  cursor: pointer;
}

#productsSpMetiosoundTop .featuresListsSliderNav > li:hover {
  opacity: 0.6;
}

#productsSpMetiosoundTop .featuresListsSliderNav > li.slick-current {
  background: linear-gradient(90deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .featuresListsSliderNav > li.slick-current:hover {
  opacity: 1;
}

#productsSpMetiosoundTop .featuresListsTxt {
  display: flex;
  position: relative;
  z-index: 1;
  width: 916px;
  height: 435px;
}

#productsSpMetiosoundTop .featuresListsTxt::before {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 520px;
  height: 100%;
  content: '';
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTxt::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTxt::before {
  right: 0;
  background: linear-gradient(275deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTxt {
  justify-content: flex-end;
  float: right;
  text-align: right;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTxt {
  justify-content: flex-start;
  float: left;
  text-align: left;
}

#productsSpMetiosoundTop .featuresListsTxtInner {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  width: 400px;
  height: 100%;
  background-color: #1a1a1a;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTxtInner {
  padding-right: 40px;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTxtInner {
  padding-left: 70px;
}

#productsSpMetiosoundTop .featuresListsTxtInner::before {
  position: absolute;
  top: 0;
  width: 145px;
  height: 100%;
  content: '';
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTxtInner::before {
  left: -145px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #1a1a1a 50.5%) no-repeat top left/100% 100%;
}

#productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTxtInner::before {
  right: -145px;
  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #1a1a1a 50.5%) no-repeat top left/100% 100%;
}

#productsSpMetiosoundTop .featuresListsTxtInner > * {
  width: 100%;
}

#productsSpMetiosoundTop .featuresListsTxtMain {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.9;
}

#productsSpMetiosoundTop .featuresListsTxtSub {
  margin-top: 30px;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.7;
}

#productsSpMetiosoundTop .featuresListsBanner {
  margin-top: 335px;
}

#productsSpMetiosoundTop .featuresBanner {
  margin-top: 335px;
}

/* -- .featuresOption -- */
#productsSpMetiosoundTop .featuresLists > li.featuresListsOption {
  margin-top: 170px;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsTtlNoSub {
  margin-top: -30px;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsSliderMain {
  width: 740px;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsSliderNav {
  justify-content: flex-end;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsTxt {
  height: 395px;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsTxtInner::before {
  background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #1a1a1a 50.5%) no-repeat top left/100% 100%;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsTxtMain {
  letter-spacing: -0.05em;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsLink {
  margin-top: 25px;
}

#productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsLink > a {
  color: #7d7d7d;
  font-size: 2.8rem;
  text-decoration: none;
  letter-spacing: 0.03em;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .features {
    margin-bottom: 60px;
  }

  #productsSpMetiosoundTop .featuresTtl {
    padding-bottom: 25px;
    margin-bottom: 60px;
  }

  #productsSpMetiosoundTop .featuresTtlMain {
    font-size: 3.2rem;
  }

  #productsSpMetiosoundTop .featuresTtlSub {
    margin-top: 10px;
    font-size: 1.3rem;
  }

  #productsSpMetiosoundTop .featuresLists > li {
    margin-top: 120px;
  }

  #productsSpMetiosoundTop .featuresListsTtl {
    margin-bottom: 15px;
  }

  #productsSpMetiosoundTop .featuresListsTtlNo {
    position: absolute;
    top: -45px;
  }

  #productsSpMetiosoundTop .featuresListsTtlNoMain {
    font-size: 5.0rem;
  }

  #productsSpMetiosoundTop .featuresListsTtlNoSub {
    margin-top: 5px;
    font-size: 1.1rem;
  }

  #productsSpMetiosoundTop .featuresListsTtlMain {
    font-size: 1.8rem;
  }

  #productsSpMetiosoundTop .featuresListsSliderMain {
    position: relative;
    top: 0;
    width: calc(100% + 15px) !important;
  }
  
  #productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsSliderMain {
    float: left;
    margin-left: -15px;
  }
  
  #productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsSliderMain {
    float: right;
    margin-right: -15px;
  }

  #productsSpMetiosoundTop .featuresListsSliderNav {
    bottom: -60px;
    width: calc(100% + 6px);
    margin-left: -6px;
  }

  #productsSpMetiosoundTop .featuresListsSliderNav > li {
    margin-left: 6px;
    width: 50px;
    padding: 2px;
  }

  #productsSpMetiosoundTop .featuresListsSliderNav > li:hover {
    opacity: 1;
  }

  #productsSpMetiosoundTop .featuresListsTxt {
    width: 100%;
    height: auto !important;
    margin-top: -120px;
  }

  #productsSpMetiosoundTop .featuresListsTxt::before {
    width: calc(100vw * (325 / 750) * 0.8);
  }

  #productsSpMetiosoundTop .featuresListsTxtInner {
    width: calc(100vw * (400 / 750) * 1.1);
    padding-top: 140px;
    padding-bottom: 30px;
  }

  #productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTxtInner {
    padding-right: 15px;
  }

  #productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTxtInner {
    padding-left: 20px;
  }

  #productsSpMetiosoundTop .featuresListsTxtInner::before {
    width: calc(100vw * (145 / 750) * 0.75);
  }

  #productsSpMetiosoundTop .featuresLists > li:nth-child(odd) .featuresListsTxtInner::before {
    left: calc(100vw * (-145 / 750) * 0.75);
  }

  #productsSpMetiosoundTop .featuresLists > li:nth-child(even) .featuresListsTxtInner::before {
    right: calc(100vw * (-145 / 750) * 0.75);
  }

  #productsSpMetiosoundTop .featuresListsTxtMain {
    font-size: 1.3rem;
    line-height: 1.9;
  }

  #productsSpMetiosoundTop .featuresListsTxtSub {
    margin-top: 15px;
    font-size: 1.0rem;
    line-height: 1.7;
  }

  #productsSpMetiosoundTop .featuresListsBanner {
    margin-top: 100px;
  }

  #productsSpMetiosoundTop .featuresBanner {
    margin-top: 100px;
  }
  
  /* -- .featuresOption -- */
  #productsSpMetiosoundTop .featuresLists > li.featuresListsOption {
    margin-top: 50px;
  }

  #productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsTtlNoSub {
    margin-top: -15px;
  }

  #productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsLink {
    margin-top: 10px;
  }

  #productsSpMetiosoundTop .featuresLists > li.featuresListsOption .featuresListsLink > a {
    font-size: 1.4rem;
  }
}


/**
 * Bottom
 * -------------------------------
 */

#productsSpMetiosoundTop .bottom {
  padding-top: 185px;
  padding-bottom: 215px;
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_bottom-bg.jpg');
  background-repeat: repeat;
}

#productsSpMetiosoundTop .bottomInner {
  text-align: center;
  line-height: 1;
}

#productsSpMetiosoundTop .bottomInner > dt {
  display: block;
}

#productsSpMetiosoundTop .bottomInner > dt img {
  width: 156px;
}

#productsSpMetiosoundTop .bottomInner > dd {
  margin-top: 80px;
}

#productsSpMetiosoundTop .bottomInner > dd img {
  width: 524px;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop .bottom {
    padding-top: 40px;
    padding-bottom: 50px;
    background-size: 50px auto;
  }

  #productsSpMetiosoundTop .bottomInner > dt img {
    width: calc(156px * 0.4);
  }

  #productsSpMetiosoundTop .bottomInner > dd {
    margin-top: 20px;
  }

  #productsSpMetiosoundTop .bottomInner > dd img {
    width: calc(524px * 0.4);
  }
}


/**
 * Floating
 * -------------------------------
 */

#productsSpMetiosoundTop #m-floating > ul {
  margin-top: -10px;
}

#productsSpMetiosoundTop #m-floating > ul > li {
  display: block;
  margin-top: 10px;
}

/* -- .sp-m-floatingLineup -- */
#productsSpMetiosoundTop .sp-m-floatingLineup {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}

#productsSpMetiosoundTop .sp-m-floatingLineup {
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_floating-lineup-bg.png');
}

#productsSpMetiosoundTop .sp-m-floatingLineup > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  height: 110px;
  text-align: center;
}

#productsSpMetiosoundTop .sp-m-floatingLineup > a > span {
  position: relative;
  display: block;
  padding-bottom: calc(55px * 0.7);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.07em;
}

#productsSpMetiosoundTop .sp-m-floatingLineup > a > span::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(56px * 0.7);
  height: calc(40px * 0.7);
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_icon-arrow.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

/* -- .sp-m-floatingShop -- */
#productsSpMetiosoundTop .sp-m-floatingShop > a {
  height: 110px;
  border-radius: 0;
  background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2412/zz_products_speaker_metiosound_top_floating-shop.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  #productsSpMetiosoundTop #m-floating > ul {
    display: flex;
    align-items: stretch;
    margin-top: 0;
  }

  #productsSpMetiosoundTop #m-floating > ul > li {
    display: inline-block;
    width: 50%;
    margin-top: 0;
    border-left: 1px solid #000;
  }
  
  #productsSpMetiosoundTop #m-floating > ul > li:nth-of-type(1) {
    border-left: none;
  }
  
  #productsSpMetiosoundTop #m-floating > ul > li > a {
    height: 100px;
  }
  
  /* -- .sp-m-floatingLineup -- */
  #productsSpMetiosoundTop .sp-m-floatingLineup {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
  }
  
  #productsSpMetiosoundTop .sp-m-floatingLineup::before {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #000;
    content: '';
  }

  #productsSpMetiosoundTop .sp-m-floatingLineup > a {
    background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2405/zz_products_speaker_metiosound_top_floating-lineup-bg-sp.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 2px) 2px;
    background-size: auto calc(100% - 4px);
    height: 100px;
  }

  #productsSpMetiosoundTop .sp-m-floatingLineup > a > span {
    padding-bottom: calc(55px * 0.6);
    font-size: 1.9rem;
  }

  #productsSpMetiosoundTop .sp-m-floatingLineup > a > span::after {
    width: calc(56px * 0.5);
    height: calc(40px * 0.5);
  }
  
  /* -- .sp-m-floatingShop -- */
  #productsSpMetiosoundTop .sp-m-floatingShop {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,153,214,1) 0%, rgba(40,26,180,1) 45%, rgba(148,26,171,1) 75%, rgba(225,110,33,1) 100%);
    padding: 2px;
  }
  
  #productsSpMetiosoundTop .sp-m-floatingShop::before {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2412/zz_products_speaker_metiosound_top_floating-shop-bg-sp.svg');
    background-repeat: repeat-x;
    background-position: 50% 50%;
    background-size: auto 100%;
    content: '';
  }
  
  #productsSpMetiosoundTop .sp-m-floatingShop > a {
    border-radius: 0;
    background-image: url('/files/cdb/ZZ/products/speaker/metiosound/top/2412/zz_products_speaker_metiosound_top_floating-shop-sp.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 100%;
    height: 100px;
  }
}