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

/* ==============================
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 .actress_list_wrapper {
  padding: 32px 0;
}
main .actress_list_wrapper > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* カード */
main .actress_list_wrapper li {
  max-width: 150px;
  aspect-ratio: 1 / calc(1 * 1.6);
  border: solid 1px #ddd;
  padding: 4px;
  border-radius: 4px;
}
main .actress_list_wrapper a {
  transition: opacity .3s;
}
main .actress_list_wrapper a:hover {
  opacity: .7;
}
/* 画像部分 */
main .actress_list_wrapper img {
  max-width: 142px;
  aspect-ratio: 1 / calc(1 * 1.4);
  object-fit: cover;
  object-position: 50% top;
  border-radius: 8px;
}
/* 名前部分 */
main .actress_list_wrapper .text {
  display: flex;
  justify-content: center;
  padding: 4px 4px 0;
}
main .actress_list_wrapper .text > span {
  display: block;
  color: var(--text-color);
}
@media screen and (max-width: 445px) {
	main .actress_list_wrapper li {
		width: calc((100% - 16px) / 3);
	}
}
@media screen and (min-width: 446px) and (max-width: 594px) {
	main .actress_list_wrapper li {
		width: calc((100% - 24px) / 4);
	}
}
@media screen and (min-width: 595px) and (max-width: 743px) {
	main .actress_list_wrapper li {
		width: calc((100% - 32px) / 5);
	}
}
@media screen and (min-width: 744px) and (max-width: 892px) {
	main .actress_list_wrapper li {
		width: calc((100% - 40px) / 6);
	}
}
@media screen and (min-width: 893px) and (max-width: 1041px) {
	main .actress_list_wrapper li {
		width: calc((100% - 48px) / 7);
	}
}


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

}

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

  /* --------------------
  女優リスト
  -------------------- */
}

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

}

/* ==============================
タブレット以下
============================== */
@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) {

  /* --------------------
  女優リスト
  -------------------- */
}