.pageTtl{
 background: url(../img/products/page.jpg) no-repeat center center;
 background-size: cover;
}

#guide .bg{
 background: url(../img/products/ship.png) no-repeat center center;
}
#guide .guidemap{
 position: relative;
 height: 1200px;
 max-width: 1800px;
 margin-left: auto;
 margin-right: auto;
}
#guide .guidemap .guide{
 width: 276px;
 position: absolute;
 font-size: 90%;
}
#guide .guidemap .infoText{
 position: absolute;
 bottom: 0px;
 left: 65%;
 padding:20px;
}
#guide .guidemap .guide1{
 top: 50px;
 left: 50%;
 margin-left: -300px;
}
#guide .guidemap .guide2{
 top: 150px;
 left: 50%;
 margin-left: 400px;
}
#guide .guidemap .guide3{
 top: 380px;
 left: 50%;
 margin-left: -650px;
}
#guide .guidemap .guide4{
 top: 550px;
 left: 50%;
 margin-left: 370px;
}
#guide .guidemap .guide5{
 top: 750px;
 left: 50%;
 margin-left: -620px;
}
#guide .guidemap .guide6{
 top: 880px;
 left: 50%;
 margin-left: -150px;
}

#product1{
 background: url(../img/products/bg1.jpg) no-repeat center center;
 background-size: cover;
 min-height: 40vw;
}

#product2{
 background: url(../img/products/bg2.jpg) no-repeat center center;
 background-size: cover;
 min-height: 40vw;
}

#winchInfo .split{
 margin-top: 50px;
 padding-top: 50px;
 border-top: solid 1px #dde6ef;
}

#winch .winch1{
 background: url(../img/products/bg3.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}
#winch .winch2{
 background: url(../img/products/bg4.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}
#winch .winch3{
 background: url(../img/products/bg5.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}

#winch2 .winch1{
 background: url(../img/products/bg6.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}
#winch2 .winch2{
 background: url(../img/products/bg7.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}
#winch2 .winch3{
 background: url(../img/products/bg8.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}

#other .other1{
 background: url(../img/products/bg9.jpg) no-repeat center center;
 background-size: cover;
 min-height: 500px;
}

.pageList1{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.pageList1 li{
 margin: 10px;
}
.pageList1 a{
 display: flex;
 width: 140px;
 height: 140px;
 border:solid 1px #38E3E2;
 border-radius: 50%;
 justify-content: center;
 align-items: center;
 background: #fff;
 box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
.pageList2{
 display: flex;
 flex-wrap: wrap;
}
.pageList2 li{
 border-radius: 40px;
 border:solid 1px #38E3E2;
 background: #545454;
 color: #fff;
 margin: 5px;
 box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
.pageList2 li a{
 display: block;
 color: #fff;
 padding: 20px 30px;
}

/*
===================================================
        pc small
===================================================
*/
@media screen and (max-width: 1500px) {
 #guide .guidemap .infoText{
  bottom: -80px;
 }
}


/*
===================================================
        tb
===================================================
*/
@media screen and (max-width: 1300px) {
 #guide .bg{
  background: none;
 }
 #guide .guidemap{
  height: auto;
  margin-top: 50px;
  text-align: center;
  max-width: 1000px;
 }
 #guide .guidemap .guide{
  width: 276px;
  position: static;
  font-size: 90%;
  margin: 0px;
  margin-bottom: 25px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
 }
 #guide .guidemap .guide .img img{
  width: 100%;
 }
 #guide .guidemap .infoText{
  position: static;
  margin-top: 25px;
  text-align: left;
 }
	.spnone {
		display: none;
	}
}

/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 768px) {
 #product1{
  background: url(../img/products/bg1.jpg) no-repeat center bottom;
  background-size: cover;
  min-height: 40vw;
 }
 #product2{
  background: url(../img/products/bg2.jpg) no-repeat center center;
  background-size: cover;
  min-height: 40vw;
 }
 #product1 .inner,
 #product2 .inner{
  background: rgba(255,255,255,0.5);
  margin: 15px;
  padding: 30px 10px;
 }
 #winchInfo .split{
  margin-top: 20px;
  padding-top: 20px;
  border-top: solid 1px #dde6ef;
 }
 #winch .winch1{
  min-height: 0px;
 }
 #winch .winch2{
  min-height: 0px;
 }
 #winch .winch3{
  min-height: 0px;
 }

 #winch2 .winch1{
  min-height: 0px;
 }
 #winch2 .winch2{
  min-height: 0px;
 }
 #winch2 .winch3{
  min-height: 0px;
 }
 #other .other1{
  min-height: 0px;
 }
 .pageList1 li{
  width: 30%;
  margin: 1%;
 }
 .pageList1 a{
  display: flex;
  width: 100%;
  height: 100%;
  border:solid 1px #38E3E2;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  background: #fff;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  font-size: 80%;
 }
}