@charset "UTF-8";
/* =========================================================
   Web Designing トップ ヒーロースライダー
   mockup.html のデザインを子テーマ用にスコープ化したもの。
   記事データは functions.php の [hero_slider] が WP_Query で出力する。
   すべて .wd-hero 配下にスコープし、テーマ全体へ影響しないようにする。
   ========================================================= */
.wd-hero{
  --wd-hero-htag:#ff8c00;
  --wd-hero-main:#191919;
  --wd-hero-link:#0053b3;
  --wd-hero-thumb-bg:#f9f9f9;
  --wd-hero-ratio:56.25%; /* 16:9 既存踏襲 */
  --wd-hero-gap:0px;
  background:#fff;
  overflow:hidden;
}
.wd-hero *{box-sizing:border-box}

/* ステージ：メイン(4) + サムネ列(1) */
.wd-hero__stage{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,1fr);
  gap:var(--wd-hero-gap);
}

/* メイン画像（16:9） */
.wd-hero__main{
  position:relative;
  overflow:hidden;
  background:var(--wd-hero-thumb-bg);
  cursor:pointer;
  display:block;
}
.wd-hero__main::before{content:"";display:block;padding-top:var(--wd-hero-ratio)}
.wd-hero__mainImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:opacity .35s ease;
}
.wd-hero__main.is-fading .wd-hero__mainImg{opacity:0}

/* サムネイル列（最大4枚, 16:9） */
.wd-hero__thumbs{
  display:grid;
  grid-template-rows:repeat(4,1fr);
  gap:var(--wd-hero-gap);
  min-width:0;
}
.wd-hero__thumb{
  position:relative;overflow:hidden;
  background:var(--wd-hero-thumb-bg);
  cursor:pointer;border:0;padding:0;
  transition:transform .2s ease, opacity .2s ease;
  display:block;
}
.wd-hero__thumb::before{content:"";display:block;padding-top:var(--wd-hero-ratio)}
.wd-hero__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wd-hero__thumb:hover img{opacity:.85}
.wd-hero__thumb.is-active{outline:3px solid var(--wd-hero-htag);outline-offset:-3px;z-index:1}

/* メイン画像下のキャプション */
.wd-hero__caption{
  padding:14px 16px 16px;
  display:flex;align-items:center;gap:14px;
  border-top:1px solid #eee;background:#fff;
}
.wd-hero__cat{
  flex:0 0 auto;
  background:var(--wd-hero-main);color:#fff;
  font-size:11px;font-weight:700;
  padding:3px 10px;letter-spacing:.05em;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.12),rgba(255,255,255,.12) 6px,transparent 6px,transparent 12px);
}
.wd-hero__title{margin:0;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:.01em}
.wd-hero__title a{color:inherit;text-decoration:none}
.wd-hero__title a:hover{color:var(--wd-hero-link)}

/* インジケーター（ドット） */
.wd-hero__dots{display:flex;justify-content:center;gap:8px;padding:4px 0 14px}
.wd-hero__dot{
  width:24px;height:4px;background:#ddd;border:none;padding:0;cursor:pointer;
  transition:background .2s;
}
.wd-hero__dot.is-active{background:var(--wd-hero-htag)}

/* レスポンシブ：サムネを下段に横並び */
@media (max-width:959px){
  .wd-hero__stage{grid-template-columns:1fr}
  .wd-hero__thumbs{grid-template-rows:none;grid-template-columns:repeat(4,1fr)}
  .wd-hero__title{font-size:15px !important}
}

/* =========================================================
   SWELL 本文スタイルの打ち消し
   このスライダーは固定ページ本文(.post_content)内に出力されるため、
   SWELL が見出し(h2)に付与する余白・装飾・縦リズムが効いて崩れる。
   .wd-hero 配下を高い優先度で初期化する。
   ========================================================= */
.wd-hero,
.wd-hero *{margin:0}
.wd-hero .wd-hero__caption{
  margin:0 !important;
  padding:14px 16px 8px !important;
}
.wd-hero .wd-hero__title{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  font-size:18px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  /* タイトルの行数でスライダー高さが変わらないよう、常に2行分を確保。
     1行のときは枠内で上下中央に置き、下に余白が偏らないようにする。 */
  display:flex !important;
  align-items:center;
  min-height:calc(1.5em * 2) !important;  /* = 2行分 */
}
/* SWELL が見出しに付ける装飾擬似要素を無効化 */
.wd-hero .wd-hero__title::before,
.wd-hero .wd-hero__title::after{
  content:none !important;
  display:none !important;
}
/* リンク側で2行クランプ（長いタイトルは2行で省略） */
.wd-hero .wd-hero__title .wd-hero__titleLink{
  background:none !important;
  border:0 !important;
  padding:0 !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}