/* カード */
ul.modal-recipe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}
ul.modal-recipe li a {
  display: block;
  text-align: center;
  text-decoration: none;
}
ul.modal-recipe li a:hover {
  text-decoration: none;
  transform: scale(1.1);
}
ul.modal-recipe li a img {
  border-radius: 50%;
}
ul.modal-recipe li a p {
  color: #313131;
  padding: 5px 0;
  font-size: .8rem;
}
a.js-modal-recipe {
  border-radius: 50% 50% 10px 10px;
}
/* modal */
.ed-modal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
z-index: 9999;
}
div#modalOverlay {
  width: 100%;
  height: 100%;
  display: flex;
  cursor: pointer;
}

.ed-closeModal {
  position: absolute;
  /* top: -35px; */
  right: -20px;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.5;
  /* 追記 */
  top: 0;
  bottom: 0;
  margin: auto;
}
.ed-closeModal::before, .ed-closeModal::after {
content: "";
width: 35px;
height: 2px;
background: #fff;
position: absolute;
top: 0;
transform: rotate(45deg);
transform-origin: top left;
}
.ed-closeModal::before {
left: 0;
}
.ed-closeModal::after {
right: 0;
transform: rotate(-45deg);
transform-origin: top right;
}

.modalContent {
width: 80%;
max-width: 800px;
margin: auto;
position: relative;
}

.recipe {
position: relative;
width: 90%;
margin: auto;
height: 80vh;
padding-bottom: 56.25%;
overflow: hidden;
filter: drop-shadow(0px 2px 5px #313131);
animation: fadeIn 1.2s ease 0s 1 normal;
}
.recipe iframe {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
}

@keyframes fadeIn {
0% {
  opacity: 0;
  transform: translateY(30px);
}
100% {
  opacity: 1;
}
}