/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 06 2026 | 03:37:19 */
/* =========================================================
  FV Slider (post_slider) - single source of truth
  - logic / modal / swiper: DO NOT TOUCH
  - layout: LONGRIDE-like
========================================================= */

#child-film #post_slider .swiper {
    padding-bottom: 2em;
}


#child-film #post_slider .swiper-pagination{
  bottom: 15px;
}

/* inner = max-width + centered */
#child-film #post_slider .p-postSlider__inner{
width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 0px;  
padding-top: 15px;
  box-sizing: border-box;
  margin-top: 90px;
}

/* slide box */
#child-film #post_slider .p-postList__item{
  padding: 20px 0;
  box-sizing: border-box;
}

/* ----- media thumb base ----- */
#child-film #post_slider .cf-fvCardThumb{
  position: relative;
  overflow: hidden;
  background: #111;
}

/* background image always fills */
#child-film #post_slider .cf-fvCardThumb__bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* noimg fallback */
#child-film #post_slider .cf-fvCardThumb__bg--noimg{
  background: #222;
}

/* play icon overlay (YouTube bg) */
#child-film #post_slider .cf-fvCardThumb.is-bg-youtube::after{
  position: absolute;
  content: '';
  background: url(https://dev.ryosuketakahashi.com/cf2026/wp-content/uploads/2026/02/yt_icon_mono_light.webp);
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .25s;
  pointer-events: none; /* クリック阻害しない */
}

#child-film #post_slider .cf-fvCardThumb.is-bg-youtube:hover::after{
  background: url(https://dev.ryosuketakahashi.com/cf2026/wp-content/uploads/2026/02/yt_icon_rgb.webp);
  background-size: contain;
  background-repeat: no-repeat;
}

/* title area */
#child-film #post_slider .p-postList__body{
  margin-top: 5px;
  text-align: center;
  color: #fff;
}


#child-film #post_slider  h2.p-postList__title {
  	font-size:1.4rem;
	margin-bottom:5px;
	    font-weight: 600;
}


#child-film #post_slider  h2.p-postList__title a {
    color: #000;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;

}

#child-film #post_slider .p-postList__excerpt{
  color: #7c7c7c;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}




/* =========================================================
  => 600px :margin-top 0
========================================================= */


@media (max-width: 959px){
	
#child-film #post_slider .p-postSlider__inner {
  margin-top: 0px;
	  padding-top: 0px;
}
	
#child-film #post_slider .p-postList__item {
  padding-bottom:  0px;
}	
	

}



/* =========================================================
  >= 600px : 7:3 layout
  - YouTubeあり：is-has-video 直下に
      [YouTube thumb][Poster box]
      [Title/Excerpt]
  - YouTubeなし：全体リンクの中の cf-fvCardThumb を 7:3 に
========================================================= */

@media (min-width: 600px){

  /* 既存：2カラムgrid（ここはそのまま） */
  #child-film #post_slider .p-postList__link.is-has-video{
        display: grid;
        grid-template-columns: 6.2fr 3fr;
        gap: 10px 30px;
        padding: 0 15px;
        padding-right: 20px;
        align-items: center;
	}

  /* 左：YouTubeは16:9を厳密維持（セルの高さ＝これで決まる） */
  #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb.is-bg-youtube.btn{
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  /* YouTube背景imgを箱にフィット */
  #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb.is-bg-youtube.btn .cf-fvCardThumb__bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
	 transform: scale(1.1);
    display: block;
	  
  }

  /* 右：ポスター枠は “左セルと同じ高さ” に揃える */
  #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb__posterLink{
    width: 100%;
    height: 100%;           /* ★左の高さに追従 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;       /* 念のため */
 aspect-ratio: 3 / 4.2;
   
	  
  }

	
 #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb__posterLink{
	transition:.25s;
}

 #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb__posterLink:hover {
    box-shadow: 5px 5px 10px rgb(0 0 0 / 40%);
    filter: opacity(0.5);
    transform: translate(-1px, -3px);
    transition-timing-function: ease-in;
}

	

  /* ポスター画像は箱内に “収める” */
  #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb__poster{
    width: 100%;
    height: 100%;           /* ★高さも使って最大限収める */
    object-fit: contain;
    display: block;
    box-shadow: none;
    border-radius: 0;
  }

  /* タイトルは下段へ */
  #child-film #post_slider .p-postList__link.is-has-video .p-postList__body{
    grid-column: 1 / -1;
    text-align: center;
    color: #fff;
  }
}


/* =========================================================
  <= 599px : keep current behavior
  - poster hidden
  - media full width
========================================================= */
@media (min-width: 600px){
  #child-film #post_slider a.p-postList__link .cf-fvCardThumb.is-bg-poster{
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 24px;
    align-items: stretch;
  }

  #child-film #post_slider a.p-postList__link .cf-fvCardThumb.is-bg-poster .cf-fvCardThumb__bg{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    display: block;
  }

	
	
  #child-film #post_slider a.p-postList__link .cf-fvCardThumb.is-bg-poster .cf-fvCardThumb__posterLink{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #child-film #post_slider a.p-postList__link .cf-fvCardThumb.is-bg-poster .cf-fvCardThumb__poster{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}



@media (max-width: 599px){
#child-film #post_slider .p-postList__item {
  padding-top:0;
}	

#child-film #post_slider .p-postSlider__inner {
    padding-inline: 0px;
}
	
	#child-film #post_slider .cf-fvCardThumb__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
}
	
	
	
    #child-film #post_slider .p-postList__link.is-has-video .cf-fvCardThumb__posterLink {
        display:none;
    }
	
	
	#child-film #post_slider h2.p-postList__title {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
	
}	
	
}