@charset "utf-8";

/* ========================================
   メインカラム関連CSS
   #main_col
======================================== */

/* PC表示 */
#main_col {
    width: 802px;
    /* layout.cssからの引き継ぎ (親テーマは810px) */
    float: left;
}

/* サイドコンテンツ無しページ (親テーマから移植) */
body.page-template-page-noside #main_col {
    width: 100%;
    float: none;
}

/* メンバーページ (親テーマから移植) */
#main_contents.noside #main_col {
    width: 100%;
    float: none;
    padding: 0 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ========================================
   Front Page Headlines Customization
   (Information, Recent Recipe, etc.)
======================================== */
.design_headline.rich_font {
    background-color: #902130;
    /* Dark red */
    color: #fff;
    border: none !important;
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

/* Hide default icons and pseudo-elements */
.design_headline.rich_font::before,
.design_headline.rich_font::after {
    display: none !important;
}

/* Centered Text */
.design_headline.rich_font,
.design_headline.rich_font .headline_text {
    font-family: 'Roboto', sans-serif;
    /* Roboto Font */
    font-size: 16px;
    /* 16px */
    font-weight: bold;
    /* Bold */
}

/* Links (View All / Archive Link) */
.design_headline.rich_font .view_all_link,
.design_headline.rich_font .archive_link {
    position: absolute;
    right: 20px;
    top: 0;
    height: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0;
}

/* Ensure link text color is white */
.design_headline.rich_font .archive_link a {
    color: #fff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Arrow for View All & Archive Link */
.design_headline.rich_font .view_all_link::after,
.design_headline.rich_font .archive_link a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: 8px;
    margin-bottom: 2px;
}

/* Hide parent theme's arrow on archive_link */
.design_headline.rich_font .archive_link::after {
    display: none !important;
}

.design_headline.rich_font .view_all_link:hover,
.design_headline.rich_font .archive_link a:hover {
    opacity: 0.8;
}

/* ========================================
   Information Section (News List)
======================================== */
#main_col .index_news.cb_contents.num1 {
    margin-bottom: 30px !important;
}

.index_news_list .item {
    margin-bottom: 0;
}

.index_news_list .item:last-child {
    margin-bottom: 0;
}

.index_news_list .link {
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: 40px !important;
    line-height: 40px !important;
    border: none !important;
    background: transparent !important;
}

.index_news_list .date {
    color: #000 !important;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px !important;
    font-weight: normal !important;
    margin: 0 40px 0 0 !important;
    float: none !important;
    line-height: 40px !important;
    flex-shrink: 0;
}

.index_news_list .title {
    color: #000 !important;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px !important;
    font-weight: normal !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    flex: 1;
    min-width: 0;
    /* Important for flex items to allow text-overflow to work */
    line-height: 40px !important;
}

.index_news_list .title span {
    display: inline;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ========================================
   Recipe/Blog List Customization (type2)
======================================== */
.recipe_list.type2 {
    margin-top: 0 !important;
}

.recipe_list.type2 .image_wrap {
    height: 250px !important;
    width: auto !important;
}

.recipe_list.type2 .image {
    height: 250px !important;
}

.recipe_list.type2 .item {
    height: 370px !important;
    width: calc(100% / 3 - 14px) !important;
    /* 20px margin用に調整 */
    margin: 0 20px 20px 0 !important;
}

.recipe_list.type2 .item:nth-child(3n) {
    margin-right: 0 !important;
}

.recipe_list.type2 .title_area {
    height: 100px !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* PC表示 */
.recipe_list.type2 .title {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

.recipe_list.type2 .title a {
    color: #000 !important;
}

.recipe_list.type2 .excerpt {
    display: none !important;
}

.recipe_list.type2 .post_meta {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #999999 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    text-align: right !important;
    align-self: flex-end !important;
}

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

/* モバイル: 650px以下 */
@media (max-width: 650px) {
    #main_col {
        width: 100%;
        float: none;
    }

    /* Mobile adjustments for header */
    .design_headline.rich_font {
        padding: 0 10px;
    }

    .design_headline.rich_font,
    .design_headline.rich_font .headline_text {
        font-size: 16px;
        /* Keep 16px on mobile too, or adjust if needed */
    }

    .design_headline.rich_font .view_all_link,
    .design_headline.rich_font .archive_link {
        font-size: 12px;
        right: 10px;
    }

    /* Mobile adjustments for news list */
    .index_news_list .date {
        margin: 0 20px 0 0 !important;
        font-size: 14px !important;
    }

    .index_news_list .title {
        font-size: 14px !important;
    }

    /* Mobile adjustments for recipe_list type2 */
    .recipe_list.type2 .item {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        height: auto !important;
        display: flex !important;
        align-items: stretch !important;
        /* 高さを揃える */
    }

    /* 左側：画像エリア */
    .recipe_list.type2 .link {
        width: 38% !important;
        flex-shrink: 0 !important;
    }

    .recipe_list.type2 .image_wrap {
        height: 0 !important;
        padding-top: 75% !important;
        /* 4:3のアスペクト比 */
        width: 100% !important;
        position: relative;
    }

    .recipe_list.type2 .image {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    /* 右側：テキストエリア */
    .recipe_list.type2 .title_area {
        width: 62% !important;
        height: auto !important;
        padding: 0 0 0 15px !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        /* 上下に分散 */
    }

    .recipe_list.type2 .title {
        font-family: 'Noto Sans JP', sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        line-height: 1.4 !important;
    }

    .recipe_list.type2 .excerpt {
        display: none !important;
    }

    .recipe_list.type2 .post_meta {
        font-size: 14px !important;
        margin-top: auto !important;
        /* 下に寄せる */
        margin-bottom: 0 !important;
        text-align: right !important;
    }
}

/* ========================================
   Index View All Link (Bottom)
======================================== */
.index_view_all_link {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 40px;
}

.index_view_all_link a {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    color: #000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.index_view_all_link a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    margin-left: 8px;
    margin-bottom: 2px;
}

.index_view_all_link a:hover {
    opacity: 0.7;
}

@media (max-width: 650px) {
    .index_view_all_link {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .index_view_all_link a {
        font-size: 14px;
    }
}