/*
Theme Name: taiyouhome Child
Template: taiyouhome
Description: Taiyouhome Child Theme
Author: Automated
Version: 1.1.0
*/

/*==================  動画カードレイアウト  ==================*/
.box_list.box_3 > div{
  position:relative;            /* バッジを重ねる土台 */
  margin:32px 0;
  padding:16px;
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* iframe を16:9で統一 */
.box_list.box_3 > div iframe{
  width:100%;
  aspect-ratio:16/9;
  border-radius:8px;
  display:block;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/*==================  テキスト  ==================*/
.video-title{
  font:700 20px/1.35 "Noto Sans JP",sans-serif;
  text-align:left;
  margin:12px 0 4px;
}
.video-desc{
  color:#555;
  font-size:15px;
  line-height:1.4;
  text-align:left;
  margin-bottom:8px;
}
/* ------ 2 行クランプ（安全マージン付） ------ */
.video-desc.clamped{
  line-height:1.4!important;     /* 23.8px */
  max-height:3em!important;      /* ← 3em = 51.0px   0.2em 余裕 */
  overflow:hidden!important;

  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

/*==================  ReadMore トグル  ==================*/
.readmore-toggle{
  display:inline-block;
  margin-top:4px;
  color:#ff8022;
  cursor:pointer;
  font-weight:600;
}

/*==================  CTA ボタン  ==================*/
.cta-btn{
  display:block;
  width:max-content;
  margin:16px auto 0;
  padding:10px 28px;
  background:#ff8022;
  color:#fff;
  border-radius:28px;
  font:700 16px/1 "Noto Sans JP",sans-serif;
  text-decoration:none;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
  transition:transform .15s;
}
.cta-btn:hover{transform:translateY(-2px);}

/*==================  再生時間バッジ  ==================*/
.duration-badge{
  position:absolute;
  bottom:8px;right:8px;z-index:2;
  background:rgba(0,0,0,.7);
  color:#fff;
  font-size:12px;
  padding:2px 4px;
  border-radius:4px;
}

/* ===== モバイル専用 強制上書き ===== */
@media (max-width: 599px){
  .box_list.box_3 .video-title{
    font-size:22px!important;
    line-height:1.4!important;
  }
  .box_list.box_3 .video-desc{
    font-size:15px!important;
    line-height:1.6!important;
  }
  .box_list.box_3 .cta-btn{
    font-size:18px!important;
    padding:12px 32px!important;
  }
}

/* ====== “今すぐ見る” ボタンを“緑でプルプル”に ====== */
@keyframes pulse-green{
  0%   { transform: scale(1);     box-shadow:0 0 0 rgba(40,167,69,.4); }
  50%  { transform: scale(1.05);  box-shadow:0 0 14px rgba(40,167,69,.4); }
  100% { transform: scale(1);     box-shadow:0 0 0 rgba(40,167,69,.4); }
}

.box_list.box_3 a.cta-btn{
  display:block!important;
  width:max-content!important;
  margin:20px auto 0!important;

  /* --- 色と形 --- */
  background:#28a745!important;   /* “進め” の緑 */
  color:#fff!important;
  padding:14px 34px!important;
  border-radius:32px!important;
  font:700 18px/1 "Noto Sans JP",sans-serif;
  text-decoration:none!important;
  text-align:center;

  /* --- プルプルアニメ --- */
  animation:pulse-green 1.5s ease-in-out infinite;
  transition:transform .15s;
}
.box_list.box_3 a.cta-btn:hover{
  transform:translateY(-3px);
}

/* ========== ショート動画（リール） ========== */
.reels-wrap{margin:24px 0 8px;}
.reels-head{text-align:center;margin-bottom:12px;font-weight:700;font-size:22px;}
.reels-track{
  display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.reel{
  flex:0 0 58vw;max-width:360px;position:relative;border-radius:16px;
  overflow:hidden;background:#000;scroll-snap-align:start;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.reel::before{content:"";display:block;aspect-ratio:9/16;}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.reel-meta{
  position:absolute;left:0;right:0;bottom:0;padding:10px;
  background:linear-gradient(transparent, rgba(0,0,0,.55));color:#fff;
}
.reel-title{font-weight:700;font-size:14px;line-height:1.35;margin:0 0 6px;}
.reel-cta{display:inline-block;background:#28a745;color:#fff;padding:8px 12px;border-radius:20px;font-weight:700;text-decoration:none;}
.reel .sound{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;}
@media (min-width:900px){.reel{flex-basis:300px}.reels-head{font-size:24px}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;}

/* ===== MOVIE 横スクロール：2枚見切れ版 ===== */
.box_list.box_3.horizontal {
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  padding:8px 16px 16px;           /* サイドの“のぞき”用余白 */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* 白背景だと境界が消える問題 → カードの影を少し強く */
.box_list.box_3.horizontal > div{
  flex:0 0 40vw;                    /* PC：2枚＋3枚目チラ見え */
  max-width:560px;
  scroll-snap-align:start;
  margin:0;                         /* 既存の縦レイアウト余白を打消し */
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  border-radius:8px;
  background:#fff;                  /* カード自身は白を維持 */
}

/* スマホ：2枚見せ＋3枚目チラ見え（画面幅ベース） */
@media (max-width: 899px){
  .box_list.box_3.horizontal > div{
    flex-basis:58vw;                /* 60%×2枚=120% → 次が少し覗く */
    max-width:none;
  }
}

/* ==== 横スクロール端のフェードをマスクで実装（重なり白帯を防止） ==== */
.scroller-fade{
  /* 左右16pxぶんだけスッと消える */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Safariなどでの描画最適化（ちらつき防止） */
.box_list.box_3.horizontal { will-change: scroll-position; }
.box_list.box_3.horizontal > div { transform: translateZ(0); }

/* 背景色に応じてフェード色を合わせる */
.content_wrap.bg_white .scroller-fade{ --fade-bg:#fff; }
.content_wrap.bg_sub   .scroller-fade{ --fade-bg:#f6f6f6; }

/* スクロール開始位置の心地よさ（最初のカードを少し内側に見せる） */
.box_list.box_3.horizontal { scroll-padding-left:16px; }