/* =========================================================
   kyno.jp トップページ「工房がえらぶ家具」ブロック（案B）
   2026-09-08 作成

   ■ アップロード先
      https://kyno.jp/css/erabu-top-block.css
      （風雅の fuuga-top-movie.css と同じ場所です）

   ■ 読み込み方
      トップページのフリーエリアの先頭で

        <link rel="stylesheet" href="https://kyno.jp/css/erabu-top-block.css" type="text/css">

      と読み込んでください。

   ■ 効く範囲
      すべて #kefb の中だけに効きます。
      クラス名も kefb- で始まるものだけなので、
      トップページの既存デザインには影響しません。

   ■ 色の変えかた
      ファイル冒頭の --kefb-gold（金）、--kefb-ink（黒）などを変えると
      全体の色が変わります。
========================================================= */


/* =========================================================
   01. ブロック全体
       風雅セクション（fuuga-top-movie.css）と同じ余白にしています
========================================================= */

#kefb{
  width:100%;
  max-width:1200px;
  margin:70px auto 80px;
  padding:0 20px;

  box-sizing:border-box;
  text-align:center;

  --kefb-gold:#9a7a43;   /* 英字ラベルの金 */
  --kefb-gold2:#80683f;  /* 線・アクセントの金 */
  --kefb-ink:#292724;    /* 見出しの黒 */
  --kefb-brown:#4c3e28;  /* 品名の茶 */
  --kefb-mincho:"Yu Mincho","Hiragino Mincho ProN",serif;
}

#kefb *{box-sizing:border-box}

#kefb img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0;
  object-fit:cover;
}

#kefb a{text-decoration:none; color:inherit}


/* =========================================================
   02. 見出しエリア
       風雅セクションと同じ作り
========================================================= */

#kefb .kefb-head{
  margin-bottom:25px;
  text-align:center;
}

/* WORKSHOP SELECTION */
#kefb .kefb-head span{
  display:block;
  margin-bottom:10px;

  color:var(--kefb-gold);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
}

/* 「つくる人間が、選んでいます。」 */
#kefb .kefb-head h2{
  margin:0 0 15px;
  padding:0;
  border:0;
  background:none;

  color:var(--kefb-ink);
  font-family:var(--kefb-mincho);

  font-size:30px;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.6;
}

/* 説明文 */
#kefb .kefb-head p{
  margin:0;

  color:#666;
  font-size:14px;
  letter-spacing:.06em;
  line-height:2;
}



/* =========================================================
   03. 写真バナー6枚
========================================================= */

#kefb .kefb-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;

  max-width:1000px;
  margin:0 auto;
}

#kefb .kefb-card{
  position:relative;
  display:block;
  overflow:hidden;

  background:#111;
  aspect-ratio:16/9;

  box-shadow:0 8px 22px rgba(0,0,0,.13);
}

#kefb .kefb-card img{transition:transform .6s ease}
#kefb .kefb-card:hover img{transform:scale(1.04)}

/* 写真の上にかける影（左を濃く、右を薄く） */
#kefb .kefb-card::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(to right,
    rgba(20,16,12,.72) 0%,
    rgba(20,16,12,.50) 42%,
    rgba(20,16,12,.06) 78%);
}


/* =========================================================
   04. 写真の上にのせる文字
========================================================= */

#kefb .kefb-tx{
  position:absolute;
  z-index:2;
  left:0; top:0; bottom:0;
  width:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  padding:0 20px;

  color:#fff;
  text-align:left;
}

/* 「工房がえらぶ」 */
#kefb .kefb-lb{
  margin-bottom:6px;
  color:#d8c49a;
  font-size:10px;
  letter-spacing:.2em;
}

/* 品目名 */
#kefb .kefb-cat{
  font-family:var(--kefb-mincho);
  font-size:23px;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.3;
}

/* 問いかけ */
#kefb .kefb-q{
  margin-top:6px;
  color:#f0ece5;
  font-size:13px;
  letter-spacing:.04em;
  line-height:1.6;
}

/* 種数・価格 */
#kefb .kefb-n{
  display:inline-block;
  margin-top:11px;
  padding-top:7px;

  border-top:1px solid rgba(255,255,255,.35);

  color:#efe7d8;
  font-size:11.5px;
  letter-spacing:.06em;
}

#kefb .kefb-n b{
  margin:0 1px;
  font-family:var(--kefb-mincho);
  font-size:17px;
  font-weight:500;
}

/* 「選び方から見る →」 */
#kefb .kefb-arrow{
  display:inline-block;
  margin-top:12px;
  padding:5px 14px;

  border:1px solid rgba(255,255,255,.6);

  color:#fff;
  font-size:11.5px;
  letter-spacing:.1em;

  transition:background .3s, color .3s;
}

#kefb .kefb-card:hover .kefb-arrow{
  background:#fff;
  color:var(--kefb-brown);
}


/* =========================================================
   05. 白バックの商品写真用（収納・テレビボード）
       暗い帯をかけると写真が沈むので、白い帯にして文字を濃くします
       → HTML側で class="kefb-card is-light" と書いた札に効きます
========================================================= */

#kefb .kefb-card.is-light{background:#fff}

#kefb .kefb-card.is-light::after{
  background:linear-gradient(to right,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.90) 25%,
    rgba(255,255,255,.30) 52%,
    rgba(255,255,255,0)   70%);
}

#kefb .kefb-card.is-light .kefb-tx{color:var(--kefb-ink)}
#kefb .kefb-card.is-light .kefb-lb{color:var(--kefb-gold)}
#kefb .kefb-card.is-light .kefb-q{color:#5a5147}
#kefb .kefb-card.is-light .kefb-n{color:#6b6157; border-top-color:rgba(0,0,0,.2)}
#kefb .kefb-card.is-light .kefb-arrow{color:var(--kefb-brown); border-color:rgba(0,0,0,.35)}
#kefb .kefb-card.is-light:hover .kefb-arrow{
  background:var(--kefb-brown);
  color:#fff;
  border-color:var(--kefb-brown);
}


/* =========================================================
   06. 締めの一行
========================================================= */

#kefb .kefb-note{
  margin-top:26px;

  color:#666;
  font-size:12.5px;
  letter-spacing:.06em;
  line-height:2;
}

#kefb .kefb-note i{
  margin:0 10px;
  color:#ccc;
  font-style:normal;
}


/* =========================================================
   07. PC版　画面幅768px以上
========================================================= */

@media screen and (min-width:768px){

  #kefb{
    margin:50px auto 70px;
    padding:35px 20px 45px;
  }

  #kefb .kefb-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  #kefb .kefb-card{aspect-ratio:3/2}
  #kefb .kefb-tx{padding:0 26px}
  #kefb .kefb-cat{font-size:25px}

}


/* =========================================================
   08. スマートフォン　画面幅767px以下
========================================================= */

@media screen and (max-width:767px){

  #kefb{
    margin:45px auto 55px;
    padding:0 15px;
  }

  #kefb .kefb-head{margin-bottom:18px}
  #kefb .kefb-head span{margin-bottom:8px; font-size:10px}
  #kefb .kefb-head h2{margin-bottom:10px; font-size:21px; line-height:1.6}
  #kefb .kefb-head p{font-size:13px; line-height:1.8}


  #kefb .kefb-card{aspect-ratio:2/1}
  #kefb .kefb-tx{padding:0 16px}
  #kefb .kefb-cat{font-size:20px}
  #kefb .kefb-q{margin-top:4px; font-size:12px}
  #kefb .kefb-n{margin-top:8px; padding-top:5px; font-size:11px}
  #kefb .kefb-n b{font-size:15px}
  #kefb .kefb-arrow{display:none}

  #kefb .kefb-note{margin-top:22px; font-size:11.5px; line-height:1.9}
  #kefb .kefb-note i{margin:0 6px}

}