@charset "utf-8";

.udh_backnum h2{
color:#fff;
text-shadow: 0 0 2px rgba(0,0,0,.2);
  text-align: center;
  font-size: calc(0.75em + 1vw);
  padding: 2% 0;
}

.udh_backnum img{
  width:100%;
  height: auto;
}

.udh_backnum ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  width:-moz-fit-content;
  width:fit-content;
  max-width: 1200px;
  margin: 40px auto;
}

.udh_backnum li{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  list-style: none;
  width: calc(100vw / 3);
  max-width: 400px;
  padding: 1em;
}

.udh_backnum li a{
  display: flex;
  flex-wrap:wrap;
  align-items: stretch;
  align-content: space-between;
  flex-direction:column;
  width:100%;
  background-color: #fff;
  box-shadow: 2px 4px 2px rgba(0,0,0,0.2);
  padding: 1em;
  color:#613400;
  text-decoration: none;
  transition: all .5s;
}

.udh_backnum li a h3{
  width:100%;
  font-size: 1.125em;
  font-weight: bold;
  background-color: #613400;
  color:#fff;
  padding: 0.5em;
  margin-bottom:1em;
  line-height:1.3;
}
.udh_backnum li a p{
  width:100%;
  line-height:1.3;
}

.udh_backnum li a h3 + p.udh_recipename::before{
  content: "【料理】"
}

.udh_backnum li a h3 + p span{
  font-size:0.75em;
}

.udh_backnum li a p:last-of-type{
  padding-top:1em;
  font-size: 0.875em;
  text-align: right;
  margin-top:auto;
}

@media screen and (min-width:769px) {
  .udh_backnum li a:hover{
     background-color: rgba(255,255,255,.4);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    border:solid 1px #eee;
  }
}

@media screen and (max-width:768px) {
  .udh_backnum ul{
    width: 96%;
justify-content: center;
  }
  
  .udh_backnum li{
    width: 100%;
    max-width: none;
  }
}