/* CSS Document */
/*-------------------- 楽天市場用 --------------------*/

/*---------- 大枠 ----------*/
.pp-main{
  max-width: 800px;
  width: 800px;
  margin: auto;
  font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size: 15px;
}

.pp-main a:hover,
.pp-main a > img:hover{
  opacity: 0.5;
}

/*---------- 注意文 ----------*/
.pp-main .info{
  border: 3px solid #e62e2e;
  padding: 8px;
  margin-bottom: 20px;
}

.pp-main .info:before{
  content: "\3054\6CE8\610F";
  color: #e62e2e;
  display: block;
  text-align: center;
  font-weight: bold;
}

.pp-main div.info > span{
  display: inline-block;
  vertical-align: top;
  width: 65%;
  margin-right: 5px;
}

.pp-main div.info > img{
  display: inline-block;
  vertical-align: top;
  width: 34%;
}

/*---------- 商品名 ----------*/
.pp-main .name{
  font-size: 18px;
  display: block;
  margin-bottom: 15px;
}

.red{
  color: #e62e2e;
}

/*---------- レイアウト ----------*/
.pp-main ul.layout{
  margin: 0;
  padding: 0;
  font-size: 0;
}

.pp-main ul.layout > li,
.pp-main ul.layout > li.box2,
.pp-main ul.layout > li.box3,
.pp-main ul.layout > li.box4,
.pp-main ul.layout > li.box3-2,
.pp-main ul.layout > li.box4-3{
  font-size: 15px;
  list-style: none;
  margin-bottom: 25px;
  display: inline-block;
  vertical-align: top;
}

.pp-main ul.layout > .box3-2{
  width: 65%;
  margin-right: 5%;
}

.pp-main ul.layout > .box4-3{
  width: 74.2%;
  margin-right: 2.6%;
}

ul.layout .box2{
  width: 47%;
  margin-right: 6%;
}

.pp-main ul.layout .box3{
  width: 30%;
  margin-right: 5%;
}

.pp-main ul.layout .box4{
  width: 23%;
  margin-right: 2.6%;
  font-size: 13px !important;
}

.pp-main ul.layout .no-bk{
  margin-right: 0;
}

.pp-main ul.layout > li > img,
.pp-main ul.layout > li > a > img{
  width: 100%;
}

.pp-main ul.layout > li > b{
  display: block;
}

/*---------- 表 ----------*/
.pp-main table.list,
.pp-main table.list-border{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.pp-main table.list tr > th,
.pp-main table.list tr > td,
.pp-main table.list-border tr > th,
.pp-main table.list-border tr > td{
  border:1px solid #999;
  padding: 5px 10px;
  font-size: 13px;
}

.pp-main table.list tr > th:first-child,
.pp-main table.list tr > td:first-child,
.pp-main table.list tr > th:last-child,
.pp-main table.list tr > td:last-child{
  border:none;
  border-bottom: 1px solid #999;
  border-top: 1px solid #999;
}

.pp-main table.list th,
.pp-main table.list-border th{
  background-color: #f0f0f0;
}

.pp-main table.list th > img,
.pp-main table.list td > img,
.pp-main table.list th > a > img,
.pp-main table.list td > a > img,
.pp-main table.list-border th > img,
.pp-main table.list-border td > img,
.pp-main table.list-border th > a > img,
.pp-main table.list-border td > a > img{
  width: 100%;
  display: block;
  margin-bottom: 3px;
}

.pp-main table.list td > a,
.pp-main table.list-border td > a{
  text-decoration-line: none;
}

.pp-main table.center tr > th,
.pp-main table.center tr > td,
.pp-main table.list tr.center > th,
.pp-main table.list tr.center > td,
.pp-main table.list-border tr.center > th,
.pp-main table.list-border tr.center > td,
.pp-main table.list-border tr > th.center,
.pp-main table.list-border tr > td.center{
  text-align: center;
}

/*---------- 項目名 ----------*/
.pp-main .title{
  display: block;
}

/*---------- バナー ----------*/
.pp-main .bn{
  width: 100%;
  display: block;
  margin-bottom: 25px;
}

/*---------- 参考写真 ----------*/
.pp-main .photo,
.pp-main .photo4,
.pp-main .photo3{
  font-size: 0;
  margin-bottom: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.pp-main .photo a,
.pp-main .photo4 a,
.pp-main .photo3 a{
  display: block;
  font-size: 13px;
  text-align: center;
}

.pp-main .photo a{
  width: 19%;
}

.pp-main .photo4 a{
  width: 23%;
}

.pp-main .photo3 a{
  width: 30%;
}

.pp-main .photo a img,
.pp-main .photo4 a img,
.pp-main .photo3 a img{
  width: 100%;
  display: block;
  margin-bottom: 3px;
}

/*---------- 関連商品 ----------*/
.pp-main .itemlist1{
  margin-bottom: 25px;
  padding: 10px;
  background-color: #f2f2f2;
  display: block;
  color: #333;
}

.pp-main .itemlist2{
  margin-bottom: 25px;
  font-size: 0;
  padding: 10px 0 5px 0;
  background-color: #f2f2f2;
}

.pp-main .itemlist5,
.pp-main .itemlist6{
  margin-bottom: 25px;
  font-size: 0;
  padding: 0;
  background-color: #f2f2f2;
}

.pp-main .itemlist2 a,
.pp-main .itemlist5 a,
.pp-main .itemlist6 a{
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  color: #333;
  text-decoration-line: none;
}

.pp-main .itemlist2 a{
  width: 45.5%;
  margin: 0 1% 5px 1%;
}

.pp-main .itemlist5 a{
  width: 17.9%;
  margin: 1%;
}

.pp-main .itemlist6 a{
  width: 14.6%;
  margin: 1%;
}

.pp-main .itemlist1 img{
  display: inline-block;
  border: 1px solid #ccc;
  width: 20%;
  margin-right: 10px;
}

.pp-main .itemlist2 a img{
  display: inline-block;
  border: 1px solid #ccc;
  width: 36%;
  margin-right: 10px;
}

.pp-main .itemlist1 span{
  display: inline-block;
  vertical-align: top;
  width: 78%;
}

.pp-main .itemlist2 a span{
  display: inline-block;
  vertical-align: top;
  width: 59%;
}

.pp-main .itemlist1 span b,
.pp-main .itemlist2 a span b{
  display: block;
}

.pp-main .itemlist5 a img,
.pp-main .itemlist6 a img{
  width: 100%;
  display: block;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

/*---------- 後継機 ----------*/
.pp-main .late{
  background-color: #ffd700;
}

.pp-main .itemlist1 img{
  width: 15%;
}

.pp-main .late span{
  font-size: 18px;
}

/*---------- セット商品 ----------*/
.pp-main .set a{
  display: block;
  background-color: #999;
  font-weight: bold;
  color: #fff !important;
  text-align: center;
  text-decoration-line: none;
  margin-bottom: 5px;
  border-radius: 3px;
  padding: 5px;
}

/*---------- バリエーション ----------*/
.pp-main .var{
  margin-bottom: 20px;
  padding: 5px;
  background-color: #f2f2f2;
}

.pp-main .var a{
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 3px;
  padding: 3px 10px;
  text-decoration-line: none;
  margin: 5px;
}

/*-----------------------------スマホ用----------------------------*/
@media screen and (max-width:600px){

/*---------- 大枠 ----------*/
.pp-main{
  max-width: 100%;
}

/*---------- レイアウト ----------*/
.pp-main ul.layout > li,
.pp-main ul.layout > li.box2,
.pp-main ul.layout > li.box3,
.pp-main ul.layout > li.box4,
.pp-main ul.layout > li.box3-2,
.pp-main ul.layout > li.box4-3{
  display:block;
  width: 100%;
}

/*---------- 関連商品 ----------*/
.pp-main .itemlist1,
.pp-main .itemlist2{
  padding: 0;
}

.pp-main .itemlist1 img,
.pp-main .itemlist1 span,
.pp-main .itemlist2 a,
.pp-main .itemlist5 a,
.pp-main .itemlist6 a{
  width: 45.5%;
  margin: 2%;
}

.pp-main .itemlist2 a img,
.pp-main .itemlist2 a span{
  width: 100%;
}

}