/* ===== top_recommend（mode=top_rec のときだけ読み込み・SP） ===== */
/* 元: cardloan-osusume-hikaku.com sp/css/style.css の top_recommend ブロック。ボタン基本スタイル（.thumb_btn）はこのサイトに無いため .top_recommend スコープで定義 */
/* ===== top_recommend（1位〜3位ピックアップ） ===== */
.top_recommend{padding:1em 0.75em 1.25em;background:#fff;}
.top_recommend .tr_image{text-align:center;}
.top_recommend .tr_image img{width:100%;max-width:300px;height:auto;border:1px solid #ddd;box-sizing:border-box;}
.top_recommend .tr_name{margin-top:.3em;font-size:1.2em;font-weight:700;line-height:1.3;}
.top_recommend .tr_name a{color:#0033cc;}

/* 1位 */
.top_recommend .tr_first{position:relative;border:2px solid #00a040;border-radius:6px;background:#fffdea;padding:1em 1em 1em;margin-top:.5em;}
.top_recommend .tr_crown{display:block;flex-shrink:0;width:48px;height:auto;} /* img/crown-nX.png を流用 */
.top_recommend .tr_headline{flex:1;min-width:0;padding-left:0;margin:0;text-align:center;font-size:1.35em;font-weight:700;color:#e4233a;line-height:1.3;}
.top_recommend .tr_first .thumb_btn{margin-top:1.2em;}
.top_recommend .tr_first .thumb_btn.orange a{font-size:4.6vw;}

/* 2位・3位 */
.top_recommend .tr_sub{display:flex;justify-content:space-between;margin-top:1.2em;}
.top_recommend .tr_card{width:48.5%;box-sizing:border-box;position:relative;border:2px solid #00a040;border-radius:6px;background:#fff;padding:.6em .6em .8em;}
.top_recommend .tr_head{display:flex;align-items:center;gap:4px;min-height:36px;padding-left:0;margin-bottom:.6em;}
/* 1位は王冠とコピーを同じ行に置き、コピーの高さに対して中央揃え */
.top_recommend .tr_first{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;}
.top_recommend .tr_first > *{grid-column:1 / -1;}
.top_recommend .tr_first .tr_head{display:contents;}
.top_recommend .tr_first .tr_crown{position:static;grid-column:1;grid-row:1;align-self:center;width:48px;max-width:48px;height:auto;margin:0;transform:translateX(16px);}
.top_recommend .tr_first .tr_headline{grid-column:2;grid-row:1;align-self:center;width:auto;min-width:0;margin:0;padding:0;white-space:normal;overflow-wrap:anywhere;}
.top_recommend .tr_first > .tr_image{margin-top:.95em;}
.top_recommend .tr_crown_s{display:block;flex-shrink:0;width:30px;height:auto;}
.top_recommend .tr_headline_s{flex:1;min-width:0;margin:0;text-align:center;font-size:.9em;letter-spacing:0;font-weight:700;color:#e4233a;line-height:1.3;}
.top_recommend .tr_headline_s sup{font-size:.66em;}
.top_recommend .tr_card .tr_name{font-size:1em;}
.top_recommend .tr_card .thumb_btn{margin-top:.8em;}
.top_recommend .tr_card .thumb_btn.orange a{font-size:4vw;padding:12px 4px 10px;background-image:none;}

/* 注釈 */
.top_recommend .top_recommend_remarks{margin-top:.8em;color:#555;font-size:.73em;line-height:1.25;}
.top_recommend .top_recommend_remarks .item{margin-bottom:.3em;}

/* ----- ボタン基本スタイル（このサイトには .thumb_btn / .shiny__btn が無いため定義） ----- */
.top_recommend .thumb_btn{text-align:center;}
.top_recommend .thumb_btn .shiny_btn{display:block;width:100%;}
.top_recommend .thumb_btn a{display:block;box-sizing:border-box;border:1px solid #e4233a;border-radius:7px;background:#e4233a;color:#fff;font-weight:700;line-height:1.3;padding:12px 8px 10px;text-align:center;text-decoration:none;box-shadow:0 4px 0 #b4232b;}

/* ----- ポイント枠：ランキング本体と同じ /img/point2.png と .common_wrapper .check_list li（allstyle.min.css）を流用 ----- */
.top_recommend .txt_c{text-align:center;margin-top:1em;}
.top_recommend .check_list{margin-top:.5em;padding:0 .3em;text-align:left;}
.top_recommend .check_list li{list-style:none;font-weight:700;}