@charset "utf-8";


#taisetuna{
  margin:30px auto 0 auto;
  h2{
    font-family: var(--font-family-minchou);
    font-size: 1.3em;
    font-weight: 500;
    inline-size: fit-content;
  	margin-inline: auto;
  	text-align: left;
  }
  > div{
        display:grid;
        grid-template-columns: 2fr 5fr;
        gap:30px;
        margin:20px auto 0 auto;
        figure{
            border-radius:10px;
            overflow: hidden;
        }
        > div{
            p{
                text-align: left;
            }
          
        }
    }
    @media (max-width: 768px) {
        > div{
            display:block;
            figure{
                
							width:min(380px,100%);
                margin:0 auto;
                aspect-ratio: 16 / 9;
                overflow: hidden;
                position:relative;
                
                img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                }
            }
            > div{
                margin:20px auto 0 auto;
            }
        }
    }
}

#cook_list{
  margin:30px auto 0 auto;
    ul{
      display:grid;
      grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
      gap:10px;
      li{
        a{
          display:block;
          background:white;
          img{
            border-radius: 10px;
                }
                &:hover{
                    img{
                      opacity: .75;
                    }
                }
            }
        }
    }
}

#jirei{
    > p{
        text-align: left;
    }
    ul{
        margin:20px auto 0 auto;
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
        gap:20px;
        li{
            border-radius:10px;
            overflow: hidden;
            border:1px solid silver;
            padding:0 0 10px 0;
            a{
                display:block;
                height:100%;
                color:rgb(var(--baceFontColor));
                text-decoration: none;
								figure{
									figcaption{
                    margin:10px 10px 0 10px;
                    text-align: left;
                    font-family: var(--font-family-minchou);
                    font-size: 1.1em;
										font-weight: 500;
                    color:rgb(var(--mainColor));
                }
								}
               
                p{
                    @include font-size(14);
                    text-align: left;
                    padding:10px 10px 0 10px;
                }
                &:hover{
                    @include opacity(0.75);
                }
            }
        }
    }
}