@charset "UTF-8";

/* =========================
  基本設定
========================= */

html {
  font-size: 100%;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif;
  color: #2b2a27;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

ul {
  list-style: none;
}

a {
  color: inherit;
}

/* =========================
  recipe-page
========================= */

.recipe-page {
  display: flex;
}

/* =========================
  mainvisual
========================= */

.mainvisual {
  width: 50%;
}

.mainvisual img {
  width: 100%;
  height: 700px;
  object-fit: cover;
}

/* =========================
  content
========================= */

.content {
  width: 50%;
  padding: 40px 5% 0;
}

.content h1 {
  font-size: 1.75rem;
  margin-bottom: 20px;
}

.content > p {
  margin-bottom: 40px;
}

.content h2 {
  font-size: 1.25rem;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.ingredient-list dt {
  width: 85%;
}

.ingredient-list dd {
  width: 15%;
  text-align: right;
}

.ingredient-list dt,
.ingredient-list dd {
  border-bottom: 1px dotted #ccc;
  padding: 6px 0;
}

.step-list {
  padding-left: 20px;
}

.step-list li {
  border-bottom: 1px dotted #ccc;
  padding: 6px 0;
}

/* =========================
  recipe-btn
========================= */

.recipe-btn {
  text-align: center;
  margin: 60px 0 100px;
}

.recipe-btn a {
  display: inline-block;
  border: 1px solid #2b2a27;
  padding: 18px 60px;
  font-size: 0.875rem;
  text-decoration: none;
}

/* =========================
  footer
========================= */

.footer {
  text-align: center;
  font-size: 12px;
}

.sns-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer p {
  margin: 20px 0 20px;
}


/* =========================
  レスポンシブ
========================= */

@media screen and (max-width: 834px) {

  .recipe-page {
    flex-direction: column;
  }

  .mainvisual,
  .content {
    width: 100%;
  }

  .mainvisual img {
    height: auto;
  }

}