@charset "UTF-8";

@media screen and ( max-width:768px ) {
}
@media screen and ( max-width:428px ) {
}

/*スパン内の文字を消す*/
span{
  visibility:hidden;
}
/*写真の大きさ設定*/
 .display img{
  height:180px;
  width: 100%;
}
@media screen and ( max-width:428px ) {
  .display img{
    width:50%;
  }
}
@media screen and ( max-width:375px ) {
  .display img{
    width:60%;
  }
}
@media screen and ( max-width:320px ) {
  .display img{
    width:65%;
  }
}

/*divboxとdivimage-foodの横並び設定*/
 .display{
  margin-top:3%;
margin-left: 20%;
  display:flex;
  gap:25px ;
}
@media screen and ( max-width:768px ) {
  .display{
    margin-left: 5%;
}
}
@media screen and ( max-width:428px ) {
  .display{
    display: block;
    margin-left:0;
  }
}




.box{
  line-height: 1.5;
  text-align: left;
}
.cooking{
  text-align: left;
  margin-left: 20%;
  line-height: 1.5;
  margin-bottom: 5%;
}

@media screen and ( max-width:768px ) {
.cooking{
    margin-left:5%;
    margin-right:5%;
  }
}
@media screen and ( max-width:428px ) {
.box,
.cooking {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 10%;
}
}

/*ｈ3にかかる*/
 .box h3{
  font-size:22px;
  margin-top:2%;
  }
  .cooking h3{
    border-left: 7px solid #5d627b;
  padding:10px;
    font-size:22px;
  }
  @media screen and ( max-width:428px ) {
  .box h3,
  .cooking h3{
  font-size: 18px;
  }
  }
  @media screen and ( max-width:320px ) {
  .box h3,
  .cooking h3{
  font-size: 13px;
  }
  }
/*ｈ2にかかる*/
.image-food h2{
  font-size: 25px;
  text-align: left;
  margin-top:5%;
  margin-bottom: 1%;
}
.image-food-han h2{
  text-align: left;
  font-size: 20px;
  margin-top:5%;
  margin-bottom: 1%;
}
/*ｐにかかる*/
@media screen and ( max-width:428px ) {
p{
font-size: 12px;
}
}
@media screen and ( max-width:320px ) {
  p{
    font-size:8px;
  }
}
/*材料の装飾*/
.box{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box p {
    margin: 0;
    padding: 0;
}