@charset "utf-8";

/* ==========================================================================
   カラダカラ レシピ機能 統合レガシースタイルシート
   本番 (rec.css, index.css, menu.inc, side.inc, login.inc) 完全再現
   ========================================================================== */

/* --- サブナビゲーション / パンくず --- */
#snavi {
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    text-indent: 0.5em;
    margin: 5px auto 10px;
    width: 950px;
    text-align: left;
}
#snavi a {
    color: #335599;
    text-decoration: none;
}
#snavi a:hover {
    text-decoration: underline;
}
#snavi span {
    margin: 0 5px;
    color: #888;
}

/* --- 3カラム レイアウト (#slayout) --- */
#scenter {
    width: 950px;
    margin: 0 auto;
    text-align: left;
}
#slayout {
    width: 100%;
    border-collapse: collapse;
}
#stlt {
    background-color: #fff;
    vertical-align: top;
    width: 190px;
    padding-right: 10px;
}
#stct {
    background-color: #fff;
    vertical-align: top;
    min-width: 530px;
}
#strt {
    background-color: #fff;
    vertical-align: top;
    width: 195px;
    padding-left: 10px;
}

/* --- 左カラム: メニュー (#menuInc) --- */
div#menuInc {
    background: transparent url('/recipe/img/bg.gif');
    font-size: 12px;
}
div#menuWrap {
    margin: 5px 10px;
}
div#menuWrap form {
    margin: 0;
    padding: 0;
}
input#menuSearchTxt {
    width: 165px;
    height: 20px;
    border: 1px solid #ccc;
    padding: 2px 4px;
    font-size: 12px;
    box-sizing: border-box;
}
input#menuSearchBtn {
    background: transparent url('/recipe/img/btn/btnSch.gif') no-repeat 0 0;
    border: none;
    cursor: pointer;
    height: 22px;
    width: 70px;
}
input#menuSearchBtn:hover {
    background-position: 0 -22px;
}
div.menuLyt1 {
    margin: 8px auto 4px;
}
div.menuLyt2 {
    margin: 4px auto 10px;
    text-align: right;
}
div#menuWrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
div#menuWrap li {
    background: transparent url('/recipe/img/menu/navi_bg.gif') no-repeat 0 0;
    height: 30px;
    line-height: 30px;
    width: 170px;
}
div#menuWrap li a {
    background: transparent url('/recipe/img/menu/list.gif') no-repeat 7px -22px;
    color: #333;
    display: block;
    height: 30px;
    text-indent: 2.2em;
    text-decoration: none;
    width: 170px;
    font-size: 12px;
}
div#menuWrap li a:hover,
div#menuWrap li.active a {
    background: transparent url('/recipe/img/menu/list.gif') no-repeat 7px 10px;
    color: #F90;
    font-weight: bold;
}
div#menuWrap li.menuLiFoot {
    background: transparent url('/recipe/img/menu/navi_bgfoot.gif') no-repeat 0 0;
    height: 10px;
}

/* --- 中央カラム: メインコンテンツ (#contentMain) --- */
div#contentMain {
    background-color: white;
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
}

/* お悩み別レシピ (#recLb) */
div#recLb {
    background-color: white;
    margin-bottom: 20px;
}
div#recLb h2 {
    border-bottom: 1px solid #eee;
    margin: 10px 0 8px;
    padding-bottom: 5px;
}
div#recLb p {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
    margin: 0 0 10px 5px;
}
table#recLbTbl {
    width: 100%;
    border-collapse: collapse;
}
table#recLbTbl td {
    padding: 4px;
    text-align: center;
}
table#recLbTbl td img {
    border: 0;
    max-width: 100%;
    height: auto;
    transition: opacity 0.15s ease;
}
table#recLbTbl td img:hover {
    opacity: 0.85;
}

/* 見出し (h2.recH2) */
h2.recH2 {
    background-color: #eee;
    border: 1px solid #ccc;
    font-size: 13px;
    font-weight: bold;
    margin: 15px 0 10px;
    padding: 0;
}
div.outset {
    border-top: 1px solid white;
    border-left: 1px solid white;
    margin: 0;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
div.outset img {
    vertical-align: middle;
}

/* 新着レシピテーブル (#recTbl3, .recTbl) */
table.recTbl {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
table.recTbl td {
    font-size: 12px;
    padding: 8px;
    vertical-align: top;
    line-height: 1.45;
}
table.recTbl td .rec-thumb-box {
    width: 130px;
    height: 130px;
    overflow: hidden;
    margin-bottom: 6px;
    background-color: #f8f8f8;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
table.recTbl td .rec-thumb-box img {
    max-width: 130px;
    max-height: 130px;
    display: block;
}
table.recTbl td div.rec-title {
    margin-bottom: 4px;
}
table.recTbl td div.rec-title a {
    color: #335599;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
}
table.recTbl td div.rec-title a:hover {
    text-decoration: underline;
    color: #cc0000;
}
table.recTbl td p.rec-desc {
    color: #555;
    font-size: 11px;
    margin: 4px 0;
    line-height: 1.4;
    word-break: break-all;
}
table.recTbl td span.rec-author {
    color: green;
    font-size: 11px;
}
table.recTbl td span.rec-comment {
    color: #666;
    font-size: 11px;
}

div#recIdxLink {
    font-size: 12px;
    text-align: right;
    margin: 10px 0 20px;
}
div#recIdxLink a, div#rankIdxLink a {
    color: #335599;
    text-decoration: none;
    font-weight: bold;
}
div#recIdxLink a:hover, div#rankIdxLink a:hover {
    text-decoration: underline;
}

/* --- 右カラム: ログイン & ランキング (#strt) --- */
div#loginInc {
    background-color: white;
}
div#loginMyToolBox {
    background-color: #eee;
    border: 1px solid #ccc;
    font-size: 12px;
    width: 180px;
    margin-bottom: 10px;
}
div#loginMyToolWrap {
    border-top: 1px solid white;
    border-left: 1px solid white;
    padding: 6px 10px;
}
div#loginMyToolWrap div {
    margin: 5px 0;
    text-indent: 26px;
    line-height: 1.4;
}
div#loginMyToolWrap div a {
    color: #335599;
    text-decoration: none;
}
div#loginMyToolWrap div a:hover {
    text-decoration: underline;
}
div#loginMyToolWrap div.icon02 {
    background: transparent url('/recipe/img/icon/icon02.gif') no-repeat 4px 0;
    font-weight: bold;
    color: #333;
}
div#loginMyToolWrap div.icon03 {
    background: transparent url('/recipe/img/icon/icon03.gif') no-repeat 4px 0;
}
div#loginRecBtnDiv {
    margin: 10px 0 20px;
    text-align: center;
}
div#loginRecBtnDiv a img {
    background: transparent url('/recipe/img/btn/btnRec.gif') no-repeat 0 0;
    display: inline-block;
}
div#loginRecBtnDiv a:hover img {
    background-position: 0 -34px;
}

/* ランキング (#sideInc, #sideRank) */
div#sideInc {
    background-color: white;
    margin-top: 10px;
}
table#sideRank {
    background-color: #ccc;
    font-size: 12px;
    width: 180px;
    border-collapse: separate;
    border-spacing: 1px;
}
table#sideRank thead th {
    background-color: #eee;
    padding: 5px 8px;
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    color: #333;
}
table#sideRank thead th img {
    vertical-align: middle;
    margin-right: 4px;
}
table#sideRank tbody td {
    background-color: white;
    padding: 8px 6px;
    font-size: 11px;
    line-height: 1.4;
}
div.sideRankT1 {
    font-weight: bold;
    margin-bottom: 4px;
}
div.sideRankT1 a {
    color: #335599;
    text-decoration: none;
}
div.sideRankT1 a:hover {
    text-decoration: underline;
}
div.sideRankD1 {
    color: #666;
    margin: 4px 0;
    font-size: 11px;
}
div.sideRankI1 {
    margin-top: 6px;
    text-align: center;
}
div.sideRankI1 img {
    max-width: 130px;
    max-height: 130px;
    border: 1px solid #eee;
}
div#rankIdxLink {
    font-size: 11px;
    margin-top: 8px;
    width: 180px;
    text-align: right;
}

/* ページネーション (p.page) */
p.page {
    margin: 20px 0;
    padding: 0;
    text-align: center;
}
p.page b, p.page span.current {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #990000;
    background-color: #990000;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    margin: 0 2px;
}
p.page a {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #335599;
    text-decoration: none;
    font-size: 12px;
    margin: 0 2px;
}
p.page a:hover {
    border-color: #990000;
    background-color: #fff0f0;
    color: #990000;
}

/* ==========================================================================
   カテゴリ・ラベル・検索・ランキング一覧 (#mcatDet, #lbDet, #schDet, #rankDet)
   ========================================================================== */
div#mcatDet {
    border-bottom: 1px dotted #999;
    width: 100%;
}
h2#mcatH2, h2#lbH2, h2#schH2, h2#rankListH2 {
    background: transparent url('/recipe/img/bg.gif');
    font-weight: normal;
    font-size: 14px;
    padding: 10px;
    margin: 0;
}
table#mcatLyt {
    margin-top: 10px;
    width: 100%;
}
table#mcatLyt td {
    vertical-align: top;
}
td#mcatLytRt {
    color: #666;
    line-height: 1.5em;
    padding-left: 10px;
    font-size: 13px;
}
div#mcatList, div#lbList, div#schList, div#rankList {
    margin-top: 15px;
    width: 100%;
}
h2#mcatListH2, h2#schListH2 {
    font-weight: normal;
    font-size: 14px;
    margin-top: 10px;
}
table#rankRecTbl {
    background-color: #999;
    font-size: 12px;
    margin-top: 10px;
    width: 100%;
}
table#rankRecTbl th {
    background-color: #eee;
    height: 30px;
    padding: 0.25em 0.4em;
    text-align: center;
}
table#rankRecTbl td {
    background-color: #fff;
    padding: 0.4em;
    text-align: center;
    vertical-align: middle;
}
table#rankRecTbl td span {
    color: green;
}
table#rankRecTbl td.rankRecTd3 {
    text-align: left;
    vertical-align: top;
    padding: 8px;
}
table#rankRecTbl td.rankRecTd3 div {
    font-weight: bold;
}
table#rankRecTbl td.rankRecTd3 p {
    margin-top: 8px;
    color: #333;
}
th#rankRecTh1 { width: 45px; }
th#rankRecTh2 { width: 145px; }
th#rankRecTh4 { width: 110px; }
th#rankRecTh5 { width: 140px; }

/* ==========================================================================
   レシピ詳細 (#detInc, .rev-cnt, .foods-tbl, .step-list, .comment-wrapper)
   ========================================================================== */
div#detInc {
    border-bottom: 1px dotted #ccc;
    width: 100%;
    padding-bottom: 10px;
}
table#detLyt {
    width: 100%;
    border-collapse: collapse;
}
td#detLytLt {
    vertical-align: middle;
}
td#detLytLt span.detTtl {
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    color: #333;
}
td#detLytLt span.detUser {
    display: inline-block;
    font-size: 13px;
    margin-left: 20px;
}
td#detLytLt span.detUser a {
    text-decoration: none;
}
td#detLytLt span#detLytSp2 {
    color: green;
    font-size: 13px;
    font-weight: bold;
}
td#detLytRt {
    width: 320px;
    text-align: right;
    vertical-align: middle;
}
div#votHead {
    font-size: 12px;
    text-align: right;
}
div#votHead div {
    padding: 0.25em;
}
div#votFoot {
    font-size: 12px;
    text-align: center;
}
div#votFoot div#votFootWrap {
    margin: auto;
    text-align: right;
    width: 320px;
}
div#votFoot div#votFootWrap div {
    padding: 0.25em;
}
div.votBtn input[type="submit"], div.votBtn button {
    cursor: pointer;
    background: transparent url('/recipe/img/btn/btVot.gif') no-repeat 0 0;
    height: 20px;
    vertical-align: middle;
    width: 85px;
    border: 0;
}
div.votBtn input[type="submit"]:hover, div.votBtn button:hover {
    background-position: 0 -20px;
}
div#detLabel {
    font-size: 12px;
    margin: 8px 0;
}
div#detLabel a {
    cursor: pointer;
    text-decoration: none;
    margin-right: 4px;
}
div#detLabel span {
    border: 1px solid #ccc;
    color: white;
    display: inline-block;
    padding: 0.25em 0.4em;
    text-align: center;
    width: 60px;
    font-size: 11px;
}
span#detLb100 { background-color: #D2D288; }
span#detLb110 { background-color: #EFBBBA; }
span#detLb120 { background-color: #C19F9F; }
span#detLb130 { background-color: #F3BFAB; }
span#detLb140 { background-color: #F29E86; }
span#detLb150 { background-color: #DEC76B; }
span#detLb160 { background-color: #C8C8C8; }
span#detLb170 { background-color: #97BAC1; }
span#detLb180 { background-color: #C9CAE8; }

table.rev-cnt {
    width: 100%;
    border-collapse: collapse;
}
table.rev-cnt > tbody > tr > th {
    vertical-align: top;
    width: 20%;
    padding: 10px;
    line-height: 26px;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
}
table.rev-cnt > tbody > tr > th p {
    padding: 4px 0px 15px 18px;
    margin: 0;
}
table.rev-cnt > tbody > tr > td {
    vertical-align: top;
    padding: 10px;
}
div.ti-bg-line {
    background-image: url('/img/frm-back.gif');
    color: #000000;
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
}
div.r-com {
    margin-top: 15px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
table.foods-tbl {
    width: 100%;
    padding: 5px 10px 0px 10px;
    font-size: 13px;
}
table.foods-tbl td {
    padding: 6px;
    border-bottom: dashed 1px #CCCCCC;
}
table.foods-tbl td strong {
    color: #FF9900;
}
table.foods-tbl td span {
    text-decoration: none;
    color: #009900;
}
table.foods-tbl th {
    padding: 6px;
    font-weight: bold;
    background: none;
    border: none;
}
table.step-list {
    width: 100%;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
}
table.step-list td {
    vertical-align: top;
    padding: 8px;
    border-bottom: 1px dashed #CCCCCC;
    line-height: 20px;
}
table.step-list td strong {
    font-size: 14px;
    color: #000000;
}
table.step-list td img {
    margin-top: 5px;
}

/* コメントエリア (comment-area.inc.css.php 準拠) */
div.d-det-ti {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}
table.comment-wrapper {
    width: 100%;
}
table.comment-wrapper > tbody > tr > th {
    width: 20%;
    padding: 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}
table.comment-wrapper > tbody > tr > td {
    width: 80%;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}
table.comment {
    width: 100%;
    border: 1px solid #EFEFEF;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}
table.comment th {
    background-color: #F0F0F0;
    font-size: 13px;
    color: #666666;
    font-weight: normal;
    padding: 4px 10px;
    width: 100%;
}
table.comment th div.c-left {
    float: left;
}
table.comment th div.c-right {
    float: right;
}
table.comment th a {
    font-size: 12px;
}
table.comment td {
    font-size: 13px;
    line-height: 1.3;
    padding: 10px 15px;
}

/* スプライトアイコン群 (rev-images.inc.css.php 完全準拠) */
img.icon-buy-amazon { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -20px; width: 110px; height: 20px; margin-top: 12px; border: none; display: inline-block; }
img.icon-calc       { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -60px; width: 12px; height: 18px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-camera     { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -98px; width: 13px; height: 12px; margin-right: 3px; border: none; display: inline-block; }
img.icon-clip       { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -130px; width: 16px; height: 15px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-comment    { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -165px; width: 21px; height: 15px; margin-right: 3px; vertical-align: middle; display: inline-block; }
img.icon-cook       { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -200px; width: 16px; height: 15px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-del        { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -235px; width: 8px; height: 7px; margin-right: 3px; border: none; display: inline-block; }
img.icon-edit       { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -262px; width: 9px; height: 9px; border: none; display: inline-block; }
img.icon-foods      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -291px; width: 18px; height: 18px; margin-right: 3px; border: none; vertical-align: middle; display: inline-block; }
img.icon-goods      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -329px; width: 18px; height: 18px; margin-right: 3px; border: none; vertical-align: middle; display: inline-block; }
img.icon-maker      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -367px; width: 16px; height: 15px; vertical-align: middle; display: inline-block; }
img.icon-menu-foods { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -402px; width: 18px; height: 15px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-minus      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -437px; width: 8px; height: 8px; margin-right: 3px; border: none; display: inline-block; }
img.icon-noimg-40   { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -465px; width: 40px; height: 30px; display: inline-block; }
img.icon-noimg-s    { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -515px; width: 100px; height: 76px; display: inline-block; }
img.icon-noimg      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -611px; width: 130px; height: 100px; display: inline-block; }
img.icon-plus       { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -731px; width: 8px; height: 8px; margin-right: 3px; border: none; display: inline-block; }
img.icon-pulldown   { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -759px; width: 16px; height: 15px; margin-left: 3px; border: none; vertical-align: middle; display: inline-block; }
img.icon-radar      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -794px; width: 17px; height: 16px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-recipe     { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -830px; width: 18px; height: 18px; margin-right: 3px; border: none; vertical-align: middle; display: inline-block; }
img.icon-step       { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -970px; width: 13px; height: 14px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-timer      { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -1004px; width: 16px; height: 15px; vertical-align: middle; margin-right: 3px; display: inline-block; }
img.icon-yaji-red   { background: transparent url('/img/thum/review-thum.gif') no-repeat 0px -1039px; width: 14px; height: 14px; margin-right: 3px; display: inline-block; }

div.img-area {
    margin-top: 10px;
    text-align: center;
}
div.img-area img {
    max-width: 150px;
    max-height: 150px;
}
div.radar {
    margin: 5px auto 10px;
}

/* ==========================================================================
   スマートフォン・レスポンシブ最適化 (max-width: 980px)
   ========================================================================== */
@media screen and (max-width: 980px) {
    #path, #snavi, #scenter {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        line-height: 1.5 !important;
        text-indent: 0 !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
        word-break: break-all !important;
    }
    @media screen and (max-width: 520px) {
        #path, #snavi, #scenter {
            max-width: 360px !important;
            margin-left: 0 !important;
            margin-right: auto !important;
        }
    }
    div#contentMain {
        margin: 0 !important;
        width: 100% !important;
    }
    #slayout, #slayout > tbody, #slayout > tbody > tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* モバイル時：メインコンテンツ（レシピ一覧）を最上部に配置 (rec_res.tpl準拠) */
    #stct {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    
    /* メニューカテゴリー：メインコンテンツの下に配置 */
    #stlt {
        order: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin-top: 25px;
        border-top: 1px dashed #ddd;
        padding-top: 15px !important;
    }
    
    /* 右サイドバー（人気ランキング）：最下部に配置 */
    #strt {
        order: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin-top: 20px;
        border-top: 1px dashed #ddd;
        padding-top: 15px !important;
    }
    
    /* 詳細ページ レスポンシブ (ri_res.tpl / det.inc $r==1 準拠) */
    table#detLyt, table#detLyt tbody, table#detLyt tr,
    td#detLytLt, td#detLytRt {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }
    td#detLytLt span.detUser {
        margin-left: 8px !important;
    }
    td#detLytRt {
        margin-top: 6px;
    }
    div#votHead {
        text-align: left !important;
    }
    div#votHead div {
        padding: 2px 0 !important;
    }
    table.rev-cnt, table.rev-cnt > tbody, table.rev-cnt > tbody > tr,
    table.rev-cnt > tbody > tr > th, table.rev-cnt > tbody > tr > td,
    table.comment-wrapper, table.comment-wrapper > tbody, table.comment-wrapper > tbody > tr,
    table.comment-wrapper > tbody > tr > th, table.comment-wrapper > tbody > tr > td,
    table#mcatLyt, table#mcatLyt > tbody, table#mcatLyt > tbody > tr,
    table#mcatLyt > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 4px 0 !important;
    }
    .det-media-wrap {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .det-media-img {
        flex: 0 0 140px !important;
    }
    .det-media-img .img-area img {
        max-width: 140px !important;
        height: auto !important;
    }
    .det-media-radar {
        flex: 0 0 180px !important;
        min-width: 0 !important;
    }
    .pc-only-br {
        display: none !important;
    }
    table.foods-tbl {
        padding: 2px 0 !important;
        font-size: 12px !important;
    }
    table.foods-tbl td, table.foods-tbl th {
        padding: 4px 2px !important;
    }
    div#votFoot div#votFootWrap {
        width: 100% !important;
        text-align: left !important;
    }
    
    /* 左メニュー: スマホ時はコンパクトに展開 */
    #stlt {
        margin-bottom: 15px;
    }
    div#menuWrap {
        margin: 0;
    }
    div#menuWrap ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    div#menuWrap li {
        width: 48% !important;
        box-sizing: border-box;
        background-size: cover;
    }
    div#menuWrap li a {
        width: 100% !important;
        font-size: 11px !important;
    }
    input#menuSearchTxt {
        width: 70% !important;
    }
    
    /* お悩み別バナー: スマホ時は2列グリッドで原寸(160x39)維持 */
    table#recLbTbl,
    table#recLbTbl tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 4px 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    table#recLbTbl tr {
        display: contents !important;
    }
    table#recLbTbl td {
        display: block !important;
        width: calc(50% - 4px) !important;
        max-width: 162px !important;
        box-sizing: border-box !important;
        padding: 2px 0 !important;
    }
    table#recLbTbl td img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }
    
    /* 新着レシピテーブル: 2列グリッド化（3列目の空白行を防ぐ） */
    table.recTbl,
    table.recTbl tbody {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    table.recTbl tr {
        display: contents !important;
    }
    table.recTbl td {
        display: block !important;
        width: 48.5% !important;
        box-sizing: border-box !important;
        padding: 6px 2px 12px !important;
        border-bottom: 1px solid #eee;
        margin-bottom: 6px;
    }
    table.recTbl td .rec-thumb-box {
        width: 100% !important;
        height: 130px !important;
    }
    table.recTbl td .rec-thumb-box img {
        max-width: 100%;
        height: auto;
    }
    table.recTbl td .rec-thumb-box img.icon-noimg {
        width: 130px !important;
        height: 100px !important;
        max-width: 100% !important;
    }
    
    /* 右サイドバー: スマホ時は下部配置 */
    #strt {
        margin-top: 25px;
        padding-top: 15px;
        border-top: 2px dashed #ddd;
    }
    div#loginMyToolBox, table#sideRank, div#rankIdxLink {
        width: 100% !important;
        box-sizing: border-box;
    }
}