@charset "utf-8";
/*
Theme Name: TENJIKU child
Theme URI:https://tcd-theme.com/tcd091/
Description:WordPressテーマ「TENJIKU」の子テーマ
Template:tenjiku_tcd091
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/
@charset "utf-8";

/*----------------------------------
// 販売中の子犬一覧 ヘッダーキャッチコピー、説明文の文字に影を追加
----------------------------------*/
#page_header .desc_area {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}

#page_header .headline {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);

}
/*----------------------------------
  販売中の子犬一覧：タイトル＋補足（A案）
----------------------------------*/

/* ========== PC / SP 共通 ========== */

/* タイトル全体：上下2段構成の土台 */
#news_list .title {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 4.2em; /* ← title_etc 分の居場所を確保（重要） */
}

/* タイトル本文（最初の span）だけを3行制限 */
#news_list .title span:not(.title_etc) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.6;
}

/* 補足情報（✓）：下固定 */
#news_list .title .title_etc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 90%;
  line-height: 1.4;
  color: #666;
}

/* ========== スマホ調整 ========== */
@media screen and (max-width: 800px) {

  #news_list .title {
    font-size: 16px;
    line-height: 1.4;
    padding-bottom: 4.6em; /* ✓が3行の前提で少し広め */
  }

  #news_list .title .title_etc {
    font-size: 14px;
  }
}

/*----------------------------------
// 画像のアスペクト比指定
----------------------------------*/
/* TCD 共通SVGアイコンのCLS対策 */
img[src$=".svg"] {
  aspect-ratio: 1 / 1;
  width: auto;
  height: auto;
}

/* ロゴ画像（横長） */
img[src*="inumusubirogo"] {
  aspect-ratio: 340 / 91;
  width: auto;
  height: auto;
}



/* ===== Drawer menu readability improve ===== */

/* 背景が黒い前提で、文字をちゃんと明るく */
#drawer_menu {
  color: rgba(255,255,255,0.92);
}

/* ロゴとメニューの区切り */
#drawer_menu .logo {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  text-align: center;
}
#drawer_menu .logo img{
  max-width: 220px;   /* デカすぎるなら調整 */
  height: auto;
}

/* メニュー全体の並びを整える */
#drawer_menu .menu > ul,
#drawer_menu nav.menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1行ごとの押せる範囲（タップ領域）を増やす */
#drawer_menu nav.menu a{
  display: block;
  padding: 16px 18px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.02em;
}

/* 行の区切り（読みやすさUP） */
#drawer_menu nav.menu li{
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* hover/focusで反応（PCでも気持ちいい） */
#drawer_menu nav.menu a:hover,
#drawer_menu nav.menu a:focus{
  background: rgba(255,255,255,0.08);
}

/* 現在ページの強調（ここ重要） */
#drawer_menu nav.menu li.current-menu-item > a,
#drawer_menu nav.menu li.current_page_item > a{
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-weight: 800;
  position: relative;
}
#drawer_menu nav.menu li.current-menu-item > a::before,
#drawer_menu nav.menu li.current_page_item > a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: #e6d2b8;  /* ヘッダーのベージュと揃える */
  border-radius: 2px;
}

/* SNS（インスタ）を下で目立たせる */
#drawer_menu_sns{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  float: none !important;
  text-align: center;
}
#drawer_menu_sns li{
  display: inline-block;
  float: none !important;
}
#drawer_menu_sns a{
  transform: scale(1.15);
}

#drawer_menu .close_button:before{
  color: #fff !important;
}
/* end ===== Drawer menu readability improve ===== */