@charset "UTF-8";
/* CSS Document */
.cleanliness_photo_wrap{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.cleanliness_photo_wrap li img{
  width: 100%;
}
#art_cleanliness_familyrelax div {
  margin: 20px 0;
}
body main .main #art_cleanliness_familyrelax .sub_cleanliness {
  color: #41210D;
  margin: auto;
  padding: 10px 10px 10px 40px;
  position: relative;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff;
}
.sub_cleanliness:before {
  content: '＊*';
  color: #fff;
  display: inline-block;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: 4px;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(345deg);
  -o-transform: rotate(20deg);
  text-shadow: 0px 0px 6px #ec92a7, 0px 0px 4px #ec92a7, 0 0 0.5px #ec92a7;
}

/* cleanliness
--------------------------------------------------------- */

@media screen and (min-width: 769px) {
  main{
    position: relative;
  }
  main .main{
    width: 828px;
    padding: 20px 0;
    margin: 0 auto;
    height: auto;
    background-color: #faf0ea;
    z-index: 10;
  }

  main .main #main_inner{
    width: 756px;
    margin-left: 36px;
    margin-top: 20px;
  }
/*
  main #main_inner h2{
    border-bottom: solid 1px #EEC1C7;
    box-shadow: 0 1px 0 #fff;
    background: url(../img/common/h2_heart.png) no-repeat left center;
    padding: 0 0 0 78px;
    margin: 0 0 1em 0;
    line-height: 1.2;
    z-index: 1;
  }
*/
  .cleanliness_photo_wrap li{
    flex: 0 0 32%;
    margin-bottom: 4px;
  }
}


@media screen and (max-width: 768px) {
  .cleanliness_photo_wrap li{
    flex: 0 0 48%;
  }
  p.sub_cleanliness {
    width: 100%;
  }
}