/* 楽天ROOM：商品カード／ROOM誘導ボックス／PR表記。緑（--line）はLINE専用のため、ボタンは黒 */

.pr-label{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--f-en);font-size:11px;font-weight:600;line-height:1;
  color:var(--ink-2);border:1px solid var(--rule-2);background:#fff;
  padding:4px 8px;border-radius:5px;
}
.pr-note{display:flex;gap:10px;align-items:flex-start;margin:-20px 0 36px;font-size:13.5px;color:var(--ink-2);line-height:1.9;max-width:62em}
.pr-note .pr-label{margin-top:3px}

/* ---- 商品カード ---- */
.room-item{
  position:relative;display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:22px;
}
.room-item .pr-label{position:absolute;top:14px;right:14px}
.room-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1;overflow:hidden;background:var(--paper-2);border-radius:10px}
.room-img img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.room-noimg{font-family:var(--f-en);font-size:28px;font-weight:600;color:var(--ink-3)}
.room-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding-right:34px}
.room-cat{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.room-name{font-family:var(--f-head);font-weight:900;font-size:17.5px;line-height:1.6;color:#000;text-decoration:none;word-break:normal;word-break:auto-phrase}
.room-name:hover{text-decoration:underline;text-underline-offset:4px}
.room-comment{font-size:14.5px;color:var(--ink-2);line-height:1.9;word-break:normal;word-break:auto-phrase}
.room-btn{
  align-self:flex-start;display:inline-flex;align-items:center;margin-top:6px;
  font-family:var(--f-head);font-weight:700;font-size:14px;text-decoration:none;
  color:#fff;background:#000;padding:10px 24px;border-radius:var(--pill);transition:opacity .15s ease;
}
.room-btn:hover{opacity:.8}
@media (max-width:520px){.room-item{grid-template-columns:92px 1fr;gap:16px;padding:18px}.room-name{font-size:16px}}

/* 記事本文の中に置いたとき */
.prose .room-item{margin-top:1.8em;margin-bottom:1.8em}
.prose .room-item a{text-decoration:none}
.prose .room-item .room-name{color:#000}
.prose .room-item .room-btn{color:#fff}

/* ---- おすすめページ ---- */
.room-group-h{font-size:clamp(20px,2.6vw,24px);margin:64px 0 20px;padding-top:22px;border-top:2px solid #000}
.room-pick-h{font-size:clamp(24px,3vw,30px);margin:88px 0 8px}
.room-pick-h+.room-group-h{margin-top:24px}
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:900px){.room-grid{grid-template-columns:1fr}}
.col-related{margin-top:56px}
.col-related-h{font-size:20px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.col-related .room-item+.room-item{margin-top:14px}

/* ---- ROOM誘導ボックス ---- */
.room-banner{
  position:relative;margin-top:48px;padding:36px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  background:var(--paper-2);border-radius:var(--r);
}
.room-banner .pr-label{position:absolute;top:14px;right:14px}
.room-banner-txt{flex:1 1 320px;padding-right:30px}
.room-banner-h{font-family:var(--f-head);font-weight:900;font-size:21px;line-height:1.6}
.room-banner-sub{font-size:14px;color:var(--ink-2);margin-top:6px}
.room-banner .room-btn{margin-top:0;padding:15px 32px;font-size:15px}
@media (max-width:560px){.room-banner{padding:32px 22px}.room-banner .room-btn{width:100%;justify-content:center}}