@charset "UTF-8";

.main {
  transition: opacity 1s ease-in-out;
}
.main img {
  height: auto;
  max-width: 500px;
}
.sub {
  display: flex;
  margin-top: 30px;
  list-style: none;
  padding: 0;
}
.sub li {
  margin-right: 20px;
  width: calc(96% / 3);
}
.sub li:hover{
  opacity: 0.7;
}
.sub li:nth-child(3n) {
  margin-right: 0;
}
.sub img {
  cursor: pointer;
  width: 100%;
}
.imgwp{
  width: 500px;
}
.flexbox{
  max-width: 900px;
  margin: auto;
}
.product{
  margin: 80px auto;
}
.product-txbox{
  margin-left: 60px;
  width: 340px;
}
.breadcrumb{
  display: flex;
  font-size: 14px;
  padding: 0 80px;
}
.breadcrumb li{
  list-style: none;
  display: flex;
  align-items: center;
}
.breadcrumb li a{
  color: black;
}
.breadcrumb li:not(:last-child):after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
    margin: 0 20px;
}
.breadcrumb li a:hover{
  color: #a1774fe8;
  text-decoration: underline;
}
.content .product-txbox p{
  text-align: left;
}

.product-mida{
  margin: 0 auto 30px;
  text-align: left;
}
.detail{
    border-top: 1px solid black;
    margin: 40px 0 0;
}
.detail p{
    padding: 35px 0;
}
@media screen and (max-width: 768px) {
.product-txbox{
    margin: auto;
    width: 100%;
} 
.breadcrumb{
  padding: 0 40px;
}
.main img{
  width: 100%;
}
.product{
  flex-wrap: wrap;
  margin: 50px 30px;
}
.product-mida {
  margin: 30px auto;
}
}