@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
*{
  margin: 0;
}
body{
  margin: 0;
  overflow-x: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}
body p{
  font-size: 17px;
}
.none{
  display: none;
}
.black{
  display: block;
}
.spbr{
  display: inline-block;
  line-height: 0.8;
}
.red{color: red;}
.top{/*
  width: 100vw;
  height: 80vh;
  background: url("../images/top-test.jpg") no-repeat center;
    */
}
.top img{
  text-align: center;
  margin: 0 auto;
  width: 100vw;
  height: auto;
}

.conteiner{
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.lineup{
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
}
.lineup h1{
  font-size: 30px;
  margin-bottom: 5px;
}
.lineup .box{
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  font-weight: bold;
}
.lineup .item{
  width: 30%;
  height: auto;
  max-height: 200px;
  background-color: grey;
  position: relative;
}
.lineup .box img{
  width: 100%;
  height: 100%;
}
.lineup a{
  text-decoration: none;
  color: black;
}
.lineup a:hover{
  opacity: 0.7;
}
.about{
  width: 100%;
  max-width: 1200px;
  min-width: 800px;
  height: 80vh;
  margin: 50px auto;
  display: flex;
  justify-content: space-around;
}
.about-content{
  width: 60%;
  height: 100%;
  position: relative;
}
.about-text{
  width: 40%;
  height: 60%;
  text-align: left;
  position: relative;
  top: 28%;
}
.about-text h1{
  font-size: 30px !important;
  font-weight: bold;
  margin-bottom: 20px;
}
.about-text p{
  margin-bottom: 10px;
  line-height: 20px;
}
.about-content .about-img1{
  width: 80%;
  height: auto;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translate(0%, -50%);

}
.about-content .about-img2{
  width: 40%;
  height: auto;
  z-index: 1;
  position: absolute;
  top: 5%;
  right: 5%;
}
.about-content .about-img3{
  width: 30%;
  height: auto;
  z-index: 1;
  position: absolute;
  top: 70%;
  left: 0;
}

.title{
  width: 100vw;
  height: 800px;
  position: relative;
}
.title .title-top{
  width: 100%;
  height: 800px;
  position: relative;
}
.ambient-top{
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/ambient-top.jpg") no-repeat center;
}
.upspeaker-top{
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/upspeaker-top.jpg") no-repeat center;  
}
.holder-top{
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/holder-top.jpg") no-repeat center;  
}
.title-text{
  position: absolute;
  color: white;
  background-color: rgba(0,0,0,0.7);
  margin: 0;
  height: 100%;
  width: 30%;
  min-width: 320px;
  text-align: center;
}
.ambient .title-text,.holder .title-text{
  top: 0;
  left: 20%;
}
.upspeaker .title-text{
  top: 0;
  right: 20%;
  background-color: rgba(0,0,0,0.7);
}
.title-text-main,.title-text-main2{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  text-align: left;
}
.title-text-main2{
  text-align: right;
}
.title-text-main h1,.title-text-main2 h1{
  font-size: 30px !important;
}
.title p{
  margin: 0;
}
.flex{
  display: flex;
  justify-content: space-between;
}
.modal{
  position: relative;
  top: 55%;
  left: 0%;
}
.button i{
  position: absolute;
  right: 15px;
  line-height: 20px;
  font-size: 20px;
}
.button2 i{
  position: absolute;
  left: 15px;
  line-height: 20px;
  font-size: 20px;
}

/* 開くボタン */
.button-open {
  display: block;
  margin: 0 auto;
  width: 20rem;
  padding: 1em;
  background: transparent;
  color: #eaeaea;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: 0.3s linear;
  position: relative;
}
.button-open:hover{
  background-color: rgba(170,170,170,0.40);
}
/* 閉じるボタン */
.button-close {
  position: absolute;
  top: -2%;
  left: 100%;
  cursor: pointer;
  font-size: 2em;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
/* オーバーレイ */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9998;
}
/* モーダルウィンドウ */
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #dfdddd;
  border-radius: 5px;
  z-index: 99999;
  width: 90%;
  max-width: 900px;
  height: 95%;

}
.modal-window img{
  width: 90%;
  height: auto;
}
.modal-content{
  max-width: 900px;
  height: 100%;
  color: black;
  padding: 2rem;
  overflow-y: scroll;
  text-align: center;
}
.modal-content iframe{

}
.modal-window h2{
  text-align: center;
  margin: 0 auto 10px 0;
  font-size: 1.5rem;
}
.cta{
  width: 100%;
  max-width: 320px;
  background-color: transparent;
  color: #eaeaea;
  margin: 0 auto;
  padding: 0.8em 0;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s linear;
  border: 2px solid white;
  position: relative;
  top: 58%;
}
.cta:hover {
  background-color: rgba(170,170,170,0.40);
}
.cta a{
  text-decoration: none;
  color: #eaeaea;
}
.cta p{
  font-size: 14px;
}
.cta i {
  position: absolute;
  right: 15px;
  line-height: 20px;
  font-size: 20px;
}
.ambient .flex,.upspeaker .flex,.holder .flex{
  margin-bottom: 20px;
}
.ambient .flex-box{
  margin: 0 auto;
  text-align: center;
}
.ambient .modal-window img{
  width: 90%;
  height: auto;
}

.service{
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
}
.service .side{
  display: flex;
  justify-content: space-around;
  text-align: left;
}
.service .side img {
  max-width: 170px;
  height: auto;
  margin: 0 10px;
}
.contact{
  width: 100%;
  max-width: 320px;
  background-color: #d30023;
  color: white;
  margin: 50px auto 0 auto;
  padding: 0.8em 0;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s linear;
  border: 1px solid white;
  position: relative;
  top: 58%;
  font-weight: bold;
}
.contact:hover {
  opacity: 0.6;
}
.contact a{
  text-decoration: none;
  color: #eaeaea;
}
.contact i {
  position: absolute;
  right: 15px;
  line-height: 20px;
  font-size: 20px;
}

@media screen and (max-width : 1024px) {

.button-open,.cta {
  width: 18rem;
}
.ambient-top {
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/ambient-top.jpg") no-repeat 60%;
}
.upspeaker-top {
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/upspeaker-top.jpg") no-repeat 35%;
}
.holder-top {
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/holder-top.jpg") no-repeat 65%;
}
.ambient .title-text, .holder .title-text {
  top: 0;
  left: 10%;
}
.upspeaker .title-text {
  top: 0;
  right: 10%;
}

.upspeaker .modal-window{
  height: auto;
  padding: 10px 0;
}
.holder .modal-window{
  height: auto;
}
.ambient-1 .modal-content{
  height: 100%;
}
.ambient-2{
  height: auto;
}
.ambient-3{
  height: 85%;
}
.service{
  width: 95%;
}


}

            @media screen and (max-width : 599px) {
.spnone{
  display: none;
}
.spblock{
  display: block;
}
* h1,* h2{
  font-size: 20px !important;
}
.button-open,.cta {
  width: 20rem;
}
.lineup {
  margin: 20px auto 70px auto;
}
.lineup h1{
  font-size: 20px !important;
}
.lineup .item{
  width: 30%;
  height: auto;
  background-color: transparent;
  position: relative;
}
.lineup .box img{
  width: 100%;
  height: auto;
}
.lineup p{
  font-size: 10px !important;
}
.about{
  width: 100%;
  max-width: 599px;
  min-width: 350px;
  height: 100%;
  margin: 50px auto;
  display: block;
}
.about-content{
  width: 100%;
  min-height: 200px;
  height: 100%;
  position: relative;
  margin-bottom: 45px;
}
.about-text{
  width: 90%;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: static;
  word-wrap: break-word;
}
.about-text p{
  font-size: 14px !important;
}
.about-content .about-img1 {
  width: 80%;
  height: auto;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translate(0%, -50%);
}
.about-content .about-img2 {
  top: -20%;
  right: 0%;
}
.about-content .about-img3 {
  top: 75%;
}

.title{
  height: 650px;
}
.upspeaker,.holder{
  height: 570px;
}
.title .title-top {
  width: 100%;
  height: 100%;
  max-height: 200px;
  position: relative;
  margin-top: 30px;
}
.ambient-top {
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/ambient-top-sp.jpg") no-repeat center;
}
.upspeaker-top {
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/upspeaker-top-sp.jpg") no-repeat center;
}
.holder-top {
  background: url("https://gigaplus.makeshop.jp/nxstage2018/img/freepage/ambient/holder-top-sp.jpg") no-repeat center;
}
.title-text{
  width: 95%;
  height: 100%;
  max-height: 480px;
}
.title-text p{
  font-size: 12px;
}
.title-text-speaker,.title-text-holder{
  max-height: 400px;
}
.title-text-main, .title-text-main2 {
  position: absolute;
  top: 10%;
}
.title-text-main h1,.title-text-main2 h1{
  font-size: 25px !important;
}
.modal{
  top: 35%;
}
.upspeaker .modal,.holder .modal{
  top: 40%;
}
.upspeaker .cta,.holder .cta{
  top: 45%;
}
.ambient .title-text,.upspeaker .title-text,.holder .title-text {
  top: 170px;
  left: 2.5%;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9998;
}
.button-open {
  margin-bottom: 15px;
  border: solid 2px white;
}
.button-close{
  left: 94%;
  top: -5%;
}
/* モーダルウィンドウ */
.modal-window {
  width: 95%;
  height: 65%;
}
.upspeaker .modal-window{
  height: auto;
  padding: 10px 0;
}
.holder .modal-window{
  height: auto;
}
.ambient-1 .modal-content{
  height: 100%;
}
.ambient-1,.ambient-2{
  height: auto;
  padding: 15px 0;
}
.ambient-3{
  height: 85%;
  padding: 15px 0 0 0;
}
.modal-content{
  max-width: 900px;
  height: 95%;
  color: black;
  padding: 0rem;
  overflow-y: scroll;
  text-align: center;
}
.modal-content iframe {
  width: 95%;
  height: auto;
  margin-bottom: 10px;
}
.modal-content .flex-box p{
  text-align: left;
  width: 90%;
  margin: 0 auto;
}
.cta{
  top: 40%;
}
.cta p{
  font-size: 12px;
}

.service{
  position: relative;
  margin: 20px auto 50px auto;
  text-align: center;
  width: 100%;
}
.service .title-img{
  width: 90%;
  height: auto;
  max-width: 500px;
}

.service .side{
  display: block;
  text-align: left;
}
.service .text{
  margin: 0 10px;
}
.service .text p{
  font-size: 16px;
  margin-bottom: 10px !important;
}
.service .side img {
  max-width: 100px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  left: 65%;
}
.contact{
  max-width: 200px;
  top: 40%;
  margin-top: 20px;
}
.contact p{
  font-size: 12px;
}


}