/* --- 全体のレイアウト設定 --- */
.recipe-layout {
    display: flex;         /* 横並びにする */
    align-items: flex-start; /* 上揃え */
    min-height: 100vh;     /* 画面の高さに合わせる */
}

/* --- 左側の画像エリア --- */
.image-section {
    flex: 1.2;             /* テキストより少し広くスペースを取る */
}

.image-section img {
    width: 100%;           /* エリアいっぱいに広げる */
    height: 100vh;         /* 画面の高さに合わせる */
    object-fit: cover;     /* 画像を切り抜いてフィットさせる（重要！） */
    display: block;
}

/* --- 右側のテキストエリア --- */
.text-section {
    flex: 1;               /* 残りのスペースを埋める */
    padding: 60px 40px;    /* 内側の余白 */
     display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
    text-align: left;      /* 左寄せにする */
    font-size: 40px;       /* 1枚目の画像に合わせて調整 */
    margin-bottom: 30px;
    font-family: 'Gill Sans', sans-serif;
}

ul {
    text-align: left;           /* 左寄せにする */
    list-style-type: disc;      /* 黒い点を表示させる */
    list-style-position: inside; /* 点を内側に入れて、h1の左端と揃える */
    padding: 0;
    margin: 0;   
}

ul li {
    line-height: 1.4; /* 行の間隔を調整 */
}

/* タイトルと詳細リンクの色やサイズ */
a {
    text-decoration: none;
    color: #333;
    font-size: 24px; /* タイトルの大きさ */
}

/* 「レシピの詳細を見る」の部分だけ少し小さく、細くする */
.detail-text {
    display: block;      /* 改行させる */
    font-size: 16px;     /* 文字を小さく */
    font-weight: normal; /* 太字を解除 */
    margin-top: 5px;     /* タイトルとの微調整 */
    padding-left: 1.2em; /* リストの点（●）の分だけ右にずらして揃える */
}

.btn {
  /* 修正：自動的に一番下へ、左右は中央へ */
    margin-top: auto; 
    margin-bottom: 60px; /* 一番下の余白 */
    text-align: center;
}

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