@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* --- FANZA archive layout --- */
.fvideo-archive { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  margin: 20px; 
}

.fvideo-item { 
  display: flex; 
  gap: 20px; 
  border-bottom: 1px solid #ddd; 
  padding-bottom: 20px; 
  align-items: flex-start; 
}

.thumb-pc { 
  flex: 0 0 auto; 
  display: block; 
}
.thumb-pc img { 
  display: block; 
  width: auto; 
  height: auto; 
  max-width: none; 
}

.thumb-sp { 
  display: none; 
}
.thumb-sp img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* テキスト部 */
.video-info { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
}
.video-title { 
  margin: 0 0 8px; 
  font-size: 1.1rem; 
}
.video-title a { 
  color: #0073aa; 
  text-decoration: none; 
}
.video-title a:hover { 
  text-decoration: underline; 
}

/* メーカー＋配信日を横並びにする領域（PC・SP共通） */
.video-meta { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin: 4px 0; 
  font-size: 0.95rem; 
  color: #555; 
}
.video-meta a { 
  color: #0073aa; 
  text-decoration: none; 
}
.video-meta a:hover { 
  text-decoration: underline; 
}

/* 出演者リスト */
.video-actress { 
  margin: 8px 0 0; 
  font-size: 0.95rem; 
  color: #555; 
}
.video-actress a { 
  color: #0073aa; 
  text-decoration: none; 
  margin-right: 6px; 
}
.video-actress a:hover { 
  text-decoration: underline; 
}

/* ページネーション */
.pagination { 
  margin: 30px 0; 
  text-align: center; 
}

/* スマホ表示 */
@media (max-width: 768px) {
  .fvideo-item { 
    flex-direction: column; 
  }
  .thumb-pc { 
    display: none; 
  }
  .thumb-sp { 
    display: block; 
    margin-bottom: 10px; 
  }
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}