@charset "utf-8";
/* CSS Document */



/* 01-flexbox＆写真にテキスト */
.b-box {
display:flex;
justify-content:space-between;
flex-wrap: wrap;
margin: 40px 0;
}

.s-box {
width:30%;
position: relative;
}

.s-box p {
    position: absolute;
    top: 0;
    left: 0;
}

.new{
	background-color: green;
	color:white;
	padding: 0 5px;	
}

.sale{
	background-color: red;
	color:white;
	padding: 0 5px;	
}

.soldout{
	background-color: black;
	color:white;
	padding: 0 5px;	
}

@media screen and (max-width: 767px) {
.b-box {
flex-direction: column;
}
.b-box .s-box {
width: 100%;
}
}





/* 02-写真のセンターにテキスト */
.example {
  position: relative;
  }

.example p {
  position: absolute;
  top: 20%; /*テキストの位置を中央は50%にする*/
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-weight: bold; 
  font-size: 5em;
  }

.example img {
  width: 100%;
  }

@media(max-width:600px){
.example p{
font-size:25px; /*スマホの時はテキストサイズを小さくする*/
}
}