@charset "UTF-8";

/* ===================================================
    食事指導の流れ 全体のレイアウト 
    左:特定保健指導の場合 と 右:生活習慣病重症化予防等の場合 の両方 
=================================================== */
.calorie_guide_container {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
    @media screen and (max-width: 800px) { flex-direction: column; }
}


/* ===================================================
   プランカード
   左:特定保健指導の場合 または 右:生活習慣病重症化予防等の場合 のどちらか
=================================================== */
.calorie_guide_card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--theme-color);
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
}

/* タイトルヘッダー */
.calorie_guide_title {
    background-color: var(--theme-color);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    padding: 2px 2px;
    margin: 0;
}

/* ===================================================
   ステップリスト
=================================================== */
.calorie_step_list {
    list-style: none;
    margin: 0;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 各ステップのカード */
.calorie_step_item {
    font-size: 0.95rem;
    position: relative;
    background-color: #f9fbfd;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 5px;
    display:flex;
    flex:1;
}


/* STEP番号バッジ */
.calorie_step_badge {
    display: inline-block;
    background-color: var(--theme-color);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.calorie_step_item img {
    object-fit: contain;
    align-self: center;
}

/* 特定保健指導の場合 の 下部 注釈エリア  */
.calorie_guide_note {
    font-size: 1.0rem;
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px dashed #d6d3d1;
    line-height: 1.5;
}