@charset "utf-8";
/* =========================================================================
   TOP レコメンド連携レイアウト 専用スタイル
   - 旧 .p-top__secContents（grid型）を 2カラム×4行に置き換える
   - index.scss / index.css は無改変。本ファイルで完結・上書きする
   ========================================================================= */

/* ---- セクション枠 ---- */
.p-rec {
  width: 100%;
}
.p-rec__container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2em 0 0;
  box-sizing: border-box;
}
.p-rec__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- 1行（メニュー + パネル）---- */
.p-rec__row {
  display: flex;
  align-items: stretch;
  border: 1px solid #d8d8d8;
  background: #fff;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.p-rec__row:last-child {
  margin-bottom: 0;
}

/* ---- 左：カテゴリメニュー ---- */
.p-rec__menu {
  flex: 0 0 28%;
  width: 28%;
  max-width: 28%;
  padding: 0 0 16px;
  box-sizing: border-box;
}
.p-rec__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  margin: 0 0 10px;
  padding: 12px 18px;
  background: #3d3d3d;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.3;
  box-sizing: border-box;
  /* 切り欠きデザイン: 右辺を斜めにカット（上辺は全幅、右上→左下へ浅く切り込む）
     高さ64px・切込96px ≒ 水平から約33°（参考デザインの傾きに一致） */
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 96px) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 96px) 100%, 0 100%);
}
.p-rec__headingEn {
  display: block;
  margin-top: 3px;
  font-size: 1.0rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  color: #c9c9c9;
}
/* ---- 見出しリンク化＋さりげないホバー
   面の明度リフト＋英字ラベルの微光のみ。動きゼロ＝reduced-motion安全・
   clip-path切り欠き(PC)/ボーダー三角形(SP)と不干渉。赤はダーク面で品位を損なうため不使用 ---- */
.p-rec__headingLink {
  display: block;
  text-decoration: none;
  color: inherit;
}
.p-rec__headingLink .p-rec__heading {
  transition: background-color 0.2s ease;
}
.p-rec__headingLink .p-rec__headingEn {
  transition: color 0.2s ease;
}
.p-rec__headingLink:hover .p-rec__heading,
.p-rec__headingLink:focus-visible .p-rec__heading {
  background-color: #4a4a4a; /* #3d3d3d から相対輝度+15〜18%。大面積の暗色面は僅差で「生きている」と伝わる */
}
.p-rec__headingLink:hover .p-rec__headingEn,
.p-rec__headingLink:focus-visible .p-rec__headingEn {
  color: #e6e6e6; /* 英字サブラベルが静かに灯る */
}
.p-rec__headingLink:focus-visible {
  outline: 2px solid #fff; /* ダーク面のa11yフォーカスは赤でなく白 */
  outline-offset: 2px;
}
.p-rec__links {
  list-style: none;
  margin: 0;
  padding: 0 18px;
}
.p-rec__links--2col {
  display: flex;
  flex-wrap: wrap;
}
.p-rec__links--2col .p-rec__linkItem {
  width: 50%;
  box-sizing: border-box;
}
/* 全幅で1行にする項目（新製品LINE UP / 素材画像ダウンロード） */
.p-rec__links--2col .p-rec__linkItem--full {
  width: 100%;
}
.p-rec__linkItem {
  border-bottom: 1px dotted #dcdcdc;
}
/* NEW バッジ（同ページ .p-top__newsPict:before のブランドレッドを継承しつつ
   ピル形状＋大文字＋字間でスタイリッシュに。フラット＝Apple HIG の階層は装飾でなく形で表現） */
.p-rec__new {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.12em 0.5em;
  background: #ca0211;
  color: #fff;
  font-size: 0.66em;          /* リンク文字に追従。一回り小さめ（折返し回避） */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-indent: 0.08em;        /* letter-spacing による右余白を相殺し中央寄せ */
  text-transform: uppercase;
  border-radius: 4px;
  vertical-align: 0.14em;     /* テキスト中心に対し気持ち持ち上げる */
  white-space: nowrap;        /* バッジ自体は改行しない */
  -webkit-font-smoothing: antialiased;
}
/* NEWバッジは全メニューで一旦非表示。復活時はこのルールを削除 */
.p-rec__menu .p-rec__new {
  display: none;
}
.p-rec__link {
  display: block;
  position: relative;
  padding: 9px 14px 9px 16px;
  color: #333;
  font-size: 1.3rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;   /* ラベル＋NEWバッジを1行に保持（折返し禁止） */
}
.p-rec__link::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #b00;
  border-right: 1px solid #b00;
  transform: translateY(-50%) rotate(45deg);
}
.p-rec__link:hover {
  color: #b00;
  text-decoration: underline;
}

/* ---- 右：レコメンド/ピックアップ パネル ---- */
.p-rec__panel {
  /* basis を 0 にしてコンテンツ幅を無視し「残り幅」だけ取る。
     basis:auto だと幅広カルーセルがパネルを押し広げ、メニュー列が潰れる（行2-4の不具合） */
  flex: 1 1;
  min-width: 0;
  width: 72%;
  position: relative;
  padding: 14px 18px 18px;
  box-sizing: border-box;
}
.p-rec__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  /* テキストのみ（背景なし）。色とフォントは .p-top__newsSlider-ttl span に合わせる */
  color: #444; /* = $baseColor（body継承色） */
  font-family: "Ubuntu", sans-serif;
}
.p-rec__badge--recommend,
.p-rec__badge--pickup {
  color: #444;
}

/* ---- レコメンド領域 ---- */
/* nav 矢印は「カード自体」の中央に来るよう、RECOMMENDバッジを含まないこの要素を基準にする */
.p-rec__recommend {
  position: relative;
}

/* ---- カルーセル（Swiper流用）---- */
.p-rec__swiper {
  overflow: hidden;
  width: 100%;
}
.p-rec__card {
  box-sizing: border-box;
}
.p-rec__cardLink {
  display: block;
  text-decoration: none;
  color: #333;
}
.p-rec__cardImg {
  display: block;
  width: 100%;
  height: auto;
  /* 表示比率はカード種別ごとにダミー画像の実寸比へ合わせる（下の種別別指定で上書き） */
  aspect-ratio: 265 / 248;
  object-fit: cover;
  background: #f4f4f4;
}
/* カテゴリ別 表示比率（ダミー画像の実寸比に準拠） */
.p-rec__card--item .p-rec__cardImg   { aspect-ratio: 248 / 248; } /* 商品 1:1 正方 */
.p-rec__card--book .p-rec__cardImg   { aspect-ratio: auto; background: none; } /* デジタルブック: 固定枠を持たせずオリジナル比率のまま表示（contain時の余白=タイトルとの不自然な間隔を解消） */
.p-rec__card--room .p-rec__cardImg   { aspect-ratio: 248 / 180; } /* 施工 ≈1.38 横長 */
.p-rec__card--market .p-rec__cardImg { aspect-ratio: 240 / 200; } /* 市場別 1.2 やや横長 */
.p-rec__cardCategory {
  display: block;
  margin-top: 7px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #888;
}
.p-rec__cardTtl {
  display: block;
  margin-top: 2px; /* テキスト直後（③分類1→④商品名等）用の密な間隔 */
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.4;
  color: #333;
}
.p-rec__cardImg + .p-rec__cardTtl {
  margin-top: 8px; /* 画像から直接続く場合（デジタルブック・施工イメージ）は視覚的な呼吸を8pxグリッドで確保 */
}
.p-rec__cardLink:hover .p-rec__cardImg {
  opacity: 0.82;
}
.p-rec__cardLink:hover .p-rec__cardTtl {
  text-decoration: underline;
}

/* ---- カテゴリ別カードフォーマット ---- */
/* 商品を探す: 価格2行 */
.p-rec__cardPrice {
  display: block;
  margin-top: 2px;
  font-size: 1.0rem;
  line-height: 1.45;
  color: #666;
}
/* デジタルブック: 縦長カタログ表紙 + サンプル帳名のみ（表紙比率は上の種別別 aspect-ratio で指定・border無し） */
/* 市場別で探す: 写真下に枠付きラベル（中央・画像にやや重ねる）。中身は「市場」－「部位」の2フィールド */
.p-rec__card--market .p-rec__cardLink {
  position: relative;
}
.p-rec__cardLabel {
  display: block;
  position: relative;
  z-index: 2;
  /* 最長ラベル「商業施設－専門店（テナント）」を1行で収めるため、固定80%幅をやめて
     内容に応じたフィット幅（最大は左右2px余白まで）+ 詰めたパディングにする */
  width: fit-content;
  max-width: calc(100% - 4px);
  margin: -16px auto 0;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #888;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.3;
  color: #333;
  white-space: nowrap;
}
.p-rec__cardLink:hover .p-rec__cardLabel {
  text-decoration: underline;
}

/* ---- ナビ矢印（.p-rec__panel 基準で上下中央） ---- */
.p-rec__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s, border-color 0.2s;
}
.p-rec__nav:hover {
  background: #fff;
  border-color: #b00;
}
.p-rec__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #555;
  border-right: 2px solid #555;
}
.p-rec__nav--prev {
  left: -2px;
}
.p-rec__nav--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.p-rec__nav--next {
  right: -2px;
}
.p-rec__nav--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
.p-rec__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* =========================================================================
   レスポンシブ（SP: 767px以下は縦積み）
   ========================================================================= */

/* タブレット中間（メニュー幅をやや広げる） */

@media (prefers-reduced-motion: reduce){
  .p-rec__headingLink .p-rec__heading,
  .p-rec__headingLink .p-rec__headingEn {
    transition: none;
  }
}

@media screen and (max-width: 767px){
  .p-rec__container {
    padding: 0 4vw;
  }
  .p-rec__row {
    display: block;
    margin-bottom: 3.2vw;
  }
  .p-rec__menu {
    flex: none;
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid #ececec;
    padding-bottom: 3.2vw;
  }
  .p-rec__panel {
    width: 100%;
  }
  .p-rec__heading {
    min-height: 0;
    margin-bottom: 0;
    font-size: 4.0vw;
    padding: 3.6vw 4vw;
    /* SP: clip-path をやめ、本番 .p-top__heading--sub と同じボーダー三角形の切り欠きに統一 */
    -webkit-clip-path: none;
    clip-path: none;
    overflow: visible;
  }
  .p-rec__heading:after {
    content: "";
    position: absolute;
    bottom: -6.33vw;
    left: 0;
    display: block;
    border-left: 90.5vw solid #3d3d3d;
    border-bottom: 6.66vw solid transparent;
  }
  .p-rec__headingEn {
    font-size: 2.6vw;
  }
  .p-rec__links {
    /* 見出し下にはみ出す三角形（bottom:-6.33vw + border-bottom:6.66vw ≒ 13vw）と重ならないよう確保 */
    padding-top: 10.66vw;
  }
  .p-rec__link {
    font-size: 3.4vw;
    padding: 2.8vw 2vw 2.8vw 4vw;
  }
  .p-rec__panel {
    padding: 3.2vw 4vw 4.2vw;
  }
  .p-rec__cardTtl {
    font-size: 2.8vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1028px){
  .p-rec__menu {
    flex-basis: 32%;
    max-width: 32%;
  }
  .p-rec__heading {
    font-size: 1.4rem;
    /* 中間幅では列が狭いため切込を浅く（テキスト衝突回避） */
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 72px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 72px) 100%, 0 100%);
  }
  .p-rec__link {
    font-size: 1.2rem;
    padding: 8px 8px 8px 14px;
  }
}