@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/


/* =========================================================
   NANPA SELECT
   タグ・検索結果・アーカイブ一覧
   アイキャッチ画像 見切れ防止
========================================================= */

body.tag .entry-card-thumb,
body.search .entry-card-thumb,
body.archive .entry-card-thumb {
  height: auto !important;
  overflow: visible !important;
  background: #f5f5f5 !important;
}

body.tag .entry-card-thumb img,
body.search .entry-card-thumb img,
body.archive .entry-card-thumb img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body.tag .entry-card-thumb .card-thumb,
body.search .entry-card-thumb .card-thumb,
body.archive .entry-card-thumb .card-thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}


/* =========================================================
   NANPA SELECT
   女優個別ページ
========================================================= */

.ns-actress-page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 48px;
  color: #222;
}

.ns-actress-page * {
  box-sizing: border-box;
}


/* =========================================================
   女優プロフィール
========================================================= */

.ns-actress-hero {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100%;
  margin: 12px 0 34px !important;
}

.ns-actress-cover {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  background: #f3f3f3 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.ns-actress-cover img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.ns-actress-info {
  min-width: 0 !important;
  padding-top: 8px !important;
}

.ns-actress-info h1 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #222 !important;
  font-size: 32px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.ns-actress-ruby {
  margin: 0 0 18px !important;
  color: #777 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.ns-actress-count {
  margin: 0 0 22px !important;
  color: #222 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}


/* =========================================================
   FANZA 女優作品一覧ボタン
========================================================= */

.ns-actress-btn {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  background: #0b2348 !important;
  border: 1px solid #0b2348 !important;
  border-radius: 6px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  transition: opacity .2s ease;
}

.ns-actress-btn:hover {
  opacity: .85 !important;
  color: #fff !important;
  text-decoration: none !important;
}


/* =========================================================
   最新出演作品 見出し
========================================================= */

.ns-actress-heading {
  display: block !important;
  width: 100% !important;
  margin: 34px 0 18px !important;
  padding: 14px 18px !important;
  background: #f4f4f4 !important;
  border-left: 5px solid #222 !important;
  color: #222 !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}


/* =========================================================
   最新出演作品
   PC：3列固定
========================================================= */

.ns-actress-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}


/* =========================================================
   WordPressが作品カード間へ追加している要素を非表示
========================================================= */

.ns-actress-grid > p {
  display: none !important;
}

.ns-actress-grid > br {
  display: none !important;
}


/* =========================================================
   作品カード
========================================================= */

.ns-actress-grid > .ns-actress-work {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  background: #fff !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  color: #222 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .05) !important;
}

.ns-actress-work:hover {
  opacity: .9 !important;
  color: #222 !important;
  text-decoration: none !important;
}


/* =========================================================
   作品画像
========================================================= */

.ns-actress-work-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f4f4f4 !important;
}

.ns-actress-work-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.ns-actress-noimage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #999 !important;
  font-size: 14px !important;
  text-align: center !important;
}


/* =========================================================
   作品タイトル・日付
========================================================= */

.ns-actress-work-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 150px !important;
  padding: 14px !important;
}

.ns-actress-work-title {
  display: -webkit-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #222 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
}

.ns-actress-work-meta {
  margin-top: auto !important;
  padding-top: 12px !important;
  color: #777 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/


/* =========================================================
   1023px以下
========================================================= */

@media screen and (max-width: 1023px) {

  body.tag .entry-card-thumb img,
  body.search .entry-card-thumb img,
  body.archive .entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .ns-actress-hero {
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .ns-actress-cover {
    max-width: 280px !important;
  }

  .ns-actress-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .ns-actress-work-img {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

}


/* =========================================================
   834px以下
   タブレット：2列
========================================================= */

@media screen and (max-width: 834px) {

  body.tag .entry-card-thumb img,
  body.search .entry-card-thumb img,
  body.archive .entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .ns-actress-hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ns-actress-cover {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .ns-actress-info {
    text-align: center !important;
  }

  .ns-actress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .ns-actress-work-img {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

}


/* =========================================================
   480px以下
   スマホ：1列
========================================================= */

@media screen and (max-width: 480px) {

  body.tag .entry-card-thumb img,
  body.search .entry-card-thumb img,
  body.archive .entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .ns-actress-page {
    margin-bottom: 32px !important;
  }

  .ns-actress-hero {
    gap: 18px !important;
    margin-bottom: 28px !important;
  }

  .ns-actress-cover {
    max-width: 300px !important;
  }

  .ns-actress-info h1 {
    font-size: 27px !important;
  }

  .ns-actress-ruby {
    font-size: 14px !important;
  }

  .ns-actress-count {
    font-size: 15px !important;
  }

  .ns-actress-btn {
    display: block !important;
    width: 100% !important;
    padding: 13px 12px !important;
  }

  .ns-actress-heading {
    margin-top: 28px !important;
    padding: 12px 14px !important;
    font-size: 20px !important;
  }

  .ns-actress-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .ns-actress-work-img {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  .ns-actress-work-body {
    min-height: 135px !important;
    padding: 13px !important;
  }

  .ns-actress-work-title {
    font-size: 14px !important;
  }

}