@charset "UTF-8";

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

html {
  font-size: 100%;
}

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

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

ul {
  list-style: none;
}

a {
  color: inherit;
}

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

.mainvisual img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center top;
}

/* =========================
  intro
========================= */

.intro {
  text-align: center;
  margin: 84px 0 80px;
  padding: 0 20px;
}

.intro h1 {
  font-size: 32px;
  margin-bottom: 20px;
}

.intro p {
  font-size: 16px;
}

/* =========================
  recipe-list
========================= */

.recipe-list {
  display: flex;
}

.recipe-list li {
  flex: 1;
}

.recipe-list img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

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

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

.recipe-btn a {
  display: inline-block;
  border: 1px solid #2b2a27;
  padding: 18px 60px;
  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-list {
    flex-direction: column;
  }

  .recipe-list li {
    width: 100%;
  }
}