@charset "UTF-8";
@import url(./common.css);

/* ==============================
レイアウト
============================== */
main .sec_h2_container {
    width: var(--base-width);
    margin: 0 auto;
}

/* ==============================
sec_h2
============================== */
/* 見出し */
main h2 {
  padding: 8px 4px;
}
main h2 > span {
  display: block;
}
main h2 > .sub_title {
  position: relative;
  padding-left: 40px;
}
main h2 > .sub_title::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 4px;
  background-color: var(--text-color);
}

/* ==============================
ピックアップレビュー
============================== */
main .workList_container ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
main .workList_container li {
  border: solid 1px #bbb;
  padding: 4px;
}
/* リンク部分 */
main .workList_container a {
  position: relative;   /* arrowの基準 */
  padding-bottom: 24px;
  transition: opacity .3s;
}
main .workList_container a:hover {
  opacity: .7;
}
main .workList_container .text {
  padding: 8px;
}
main .workList_container .text > span {
  display: block;
}
main .workList_container .actress_name {
  padding: 8px;
  text-align: right;
}
/* arrow設置 */
main .workList_container a > .arrow_badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

/* ==============================
スマホ
============================== */
@media screen and (max-width: 767px) {

  /* --------------------
  ピックアップレビュー
  -------------------- */
  main .workList_container li {
    width: calc((100% - 8px) / 2);
  }
}

/* ==============================
タブレット
============================== */
@media screen and (min-width: 768px) and (max-width: 959px) {

}

/* ==============================
タブレット以上
============================== */
@media screen and (min-width: 768px) {

  /* --------------------
  ピックアップレビュー
  -------------------- */
  main .workList_container li {
    width: calc((100% - 16px) / 3);
  }
}

/* ==============================
タブレット以下
============================== */
@media screen and (max-width: 959px) {

}

/* ==============================
ノートパソコン以下
============================== */
@media screen and (max-width: 1280px) {

}

/* ==============================
ノートパソコン
============================== */
@media screen and (min-width: 960px) and (max-width: 1280px) {

}

/* ==============================
デスクトップ
============================== */
@media screen and (min-width: 1281px) {

}

/* ==============================
パソコン
============================== */
@media screen and (min-width: 960px) {

}