/* スタイルガイド */
:root {
  --font-family_primary: Helvetica Neue, Arial, Hiragino Sans, Meiryo, sans-serif;
}

/* メディアクエリの指定
@media screen and (max-width:834px){} 
@media not screen and (max-width:834px){}
@media screen and (max-width:600px){}
 */

/* 個別リセット */
body {
  margin: 0;
}

ul {
  padding: 0;
}

ul li {
  list-style: none;
}

ol {
  padding-left: 20px;
}

dd {
  margin: 0;
}

/* タイポグラフィー */
body {
  font-family: var(--font-color_primary);
}

a {
  color: #2b2a27;
}


/* 共通 */
img {
  max-width: 100%;
}

/* コンテンツ幅 */

/* @media screen and (max-width:600px) { */
/* .contents-width{ */
/* padding: 0 3%; */
/* }   */
/*  */
/* } */

/*表示・非表示 */

@media screen and (max-width:834px) {
  .sp-none {
    display: none;
  }
}

@media not screen and (max-width:834px) {
  .pc-none {
    display: none;
  }
}



/* ----------------------------------
レシピメニュー
------------------------------------- */

.flex{
  margin-bottom: 60px;
}
.flex .recipe-width {
  padding: 0 5%;
}

.main-img img {
  height: 700px;
  width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.flex .recipe .page-title {
  font-size: 1.75rem;
  text-align: center;
  color: red;
}

/* 材料 */
.flex .recipe .recipe-list {
  font-size: 1.25rem;
  border-bottom: solid 0.07rem #ccc;
  margin-top: 50px;
}

.flex .recipe .recipe-txt_flex {
  display: flex;
  flex-wrap: wrap;
}

.flex .recipe .recipe-txt_flex dt {
  width: 85%;
  padding: 6px 0;
  border-bottom: dotted 1px #ccc;
}

.flex .recipe .recipe-txt_flex dd {
  width: 15%;
  padding: 6px 0;
  border-bottom: dotted 1px #ccc;
  text-align: right;
}

/* 作り方 */

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



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

}

@media not screen and (max-width:834px) {
  .flex {
    display: flex;
  }

  .flex .recipe {
    width: 50%;
  }
  
  

}

/* 注釈 */
.annotation{
  text-align: center; 
  color: red;
}
/* ボタン */

.button{
  text-align: center;
  margin-bottom: 80px;
}

.button a{
  display: inline-block;
  padding: 20px 50px;
  border: solid 0.08rem #2b2a27;
  text-decoration: none;
}
@media screen and (max-width:834px){} 
@media not screen and (max-width:834px){}

/* ----------------------------------
footer
------------------------------------- */

.sns {
  display: flex;
  justify-content: center;
}

.sns-li {
  margin-left: 1rem;
}

footer p {
  font-size: 13px;
  text-align: center;
}

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

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