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

/* ==============================
main・aside共通
============================== */
/* sec_h3 */
.h3_wrapper {
  padding: 8px 0;
}
h3 {
  padding: 8px;
  border-left: solid 5px var(--accent-color);
}
h3 > .sub_title {
  font-size: 90%;
}

/* ==============================
sec_h2
============================== */
/* 見出し */
main h2 > span {
  display: block;
  padding: 4px;
  line-height: 1.4;
}
/* ----------
更新日
---------- */
main .update {
  padding: 16px 32px;
}
main .update > time {
  position: relative;
}
main .update > time::before {
  content: "";
  display: inline-block;
  width: 20px;
  aspect-ratio: 1;
  position: absolute;
  top: 2px;
  left: -22px;
  background-image: url(../image/icon/update.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* ----------
サンプル動画
---------- */
main .sample_movie iframe {
  width: 476px;
  height: 306px;
}
/* ----------
サンプル画像
---------- */
main .review_sample {
  display: flex;
  gap: 4px;
  padding: 1rem 0;
}
/* ----------
記事内の小さいコンテンツのラベル
---------- */
main .list_wrapper > .list_label,
main .review::before {
  padding: 0 1rem;
  background-color: var(--medium-color);
  color: #fff;
}

/* ==============================
sec_h3
============================== */
main .sec_h3:not(:last-of-type) {
  margin-bottom: 5rem;
}
main .sec_h3:first-of-type {
  margin-top: 5rem;
}
/* 見出し */
main .sec_h3 h3 > span {
  display: block;
}
main .sec_h3 h3 > .main_title {
  font-size: calc(var(--font-size) * 1.4);
}
main .sec_h3 h3 > .sub_title {
  margin-top: 8px;
  font-size: var(--font-size);
}

/* ==============================
記事内のリスト
============================== */
/* 箇条書き・ナンバーリスト 共通 */
main .list_wrapper {
  position: relative; /* ラベルの基準 */
  border: solid 1px #ddd;
  margin: 2rem 1rem;
}
main .list_wrapper > .list_label {
  display: inline-block;
  position: absolute;
  top: -1rem;
  left: 2rem;
}
/* 箇条書き */
main .review_list_content {
  padding: 1rem;
}
main .review_list_content li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}
main .review_list_content li::before {
  content: "";
  display: inline-block;
  width: 1rem;
  aspect-ratio: 1;
  position: absolute;
  top: 0.4rem;
  left: 0;
  background: url(../image/icon/check-box.svg) no-repeat center/cover;
}
/* ナンバーリスト */
main .review_number_list {
  padding: 24px 16px 16px 32px;
}
main .review_number_list > li {
  margin-bottom: 8px;
}

/* ==============================
レビュー欄
============================== */
main .review {
  position: relative;
  padding: 15px;
  border: solid 1px #ddd;
  margin: 2rem 1rem;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  background: var(--light-color);
}
main .review::before {
  content: "レビュー";
  display: inline-block;
  position: absolute;
  top: -10px;
  left: 16px;
}
main .review > p {
  padding: 8px;
}

/* ==============================
記事内での、他記事へのリンク
============================== */
/* 関連記事・おすすめ作品 共通 */
main .related_articles > .related,
main .related_articles > .recommendation {
  width: min(90%, 850px);
  margin: 2rem auto;
}
main .related_articles a {
  display: flex;
  gap: 1rem;
  position: relative;
  padding: 0.5rem;
  box-shadow: 1px 3px 5px 3px #bbb;
  transition: transform 0.2s, opacity 0.2s;
}
main .related_articles a::before {
  content: "関連作品";
  display: inline-block;
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  padding: 0 0.5rem;
  font-family: "NotoSerifJP";
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
main .related_articles a:hover {
  box-shadow: 0 0 1px 1px #ddd;
  transform: translate(2px, 2px);
  opacity: 0.8;
}
main .related_articles a > img {
  width: 40%;
}
main .related_articles .related_link_text {
  width: calc((100% - 1rem) - 40%);
}
main .related_articles .related_link_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main .related_articles .related_link_text > span {
  display: block;
}
main .related_articles .related_link_text > .article_title {
  text-align: left;
}
main .related_articles .related_link_text > .actress_name {
  text-align: right;
}
/* 関連記事 */
main .related_articles > .related > a::before {
  content: "関連作品";
}
/* おすすめ作品 */
main .related_articles > .recommendation > a::before {
  content: "おすすめ作品";
}

/* ==============================
sec_h4
============================== */
main .sec_h4 {
  margin-top: 3rem;
}
/* 見出し */
main .sec_h4 h4 {
  position: relative;
  padding: 8px;
}
main .sec_h4 h4::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--accent-color);
}

/* ==============================
評価星 見出しを使ったパターン（加藤ツバキの記事でのみ使用中）
============================== */
main .rating_container > .sec_h4 {
  padding-bottom: 16px;
  border-bottom: dotted 3px #ddd;
  margin-top: 16px;
}
main .rating_container h4 {
  position: relative; /* 疑似要素の基準 */
  padding: 0 8px 0 26px;
}
main .rating_container h4::before {
  content: "";
  display: inline-block;
  width: 20px;
  aspect-ratio: 1;
  position: absolute;
  top: 2px;
  left: 0;
  border-radius: 50%;
  background-color: var(--medium-color);
}
main .rating_container h4::after {
  content: none; /* 上書き */
}
main .star5_rating {
  position: relative;
  padding: 8px 16px 8px 80px;
}
main .star5_rating::before {
  content: "評価";
  display: inline-block;
  position: absolute;
  top: 14px;
  left: 40px;
  font-size: 14px;
  color: var(--text-color);
}
main .rating_container .star5_rating + p {
  padding-top: 0;
}
/* ★表示 */
main .star5_rating > .stars {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: #ccc;
  font-size: 20px;
}
main .star5_rating > .stars::before,
main .star5_rating > .stars::after {
  content: "★★★★★";
}
main .star5_rating > .stars::after {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #edc339;
}
.star5_rating > .stars[data-rating="5"]:after {
  width: 100%; /* 星5 */
}
.star5_rating > .stars[data-rating="4"]:after {
  width: 80%; /* 星4 */
}
.star5_rating > .stars[data-rating="3"]:after {
  width: 60%; /* 星3 */
}
.star5_rating > .stars[data-rating="2"]:after {
  width: 40%; /* 星2 */
}
.star5_rating > .stars[data-rating="1"]:after {
  width: 20%; /* 星1 */
}
.star5_rating > .stars[data-rating="0"]:after {
  width: 0%; /* 星0 */
}

/* ==============================
aside
============================== */
/* ----------
リンク
---------- */
.aside_link_container {
  margin-bottom: 16px;
}
/* レビューページへのリンク */
.aside_link_container.review li {
  padding-bottom: 1px;
  border-bottom: solid 1px #bbb;
  margin: 0.25rem 0;
}
.aside_link_container.review a {
  display: flex;
  gap: 0.25rem;
}
.aside_link_container.review a img {
  width: 120px;
  height: auto;
}
.aside_link_container.review .review_title {
  line-height: 1.4;
}
.aside_link_container.review .review_title > span {
  display: block;
}
/* 女優の画像ギャラリーへのリンク */
.aside_link_container.actress li,
.aside_link_container.actress .actress_gallery {
  border-bottom: solid 1px #bbb;
}
.aside_link_container.actress a {
  transition: background-color 0.2s, opacity 0.2s;
}
.aside_link_container.actress a:hover {
  background-color: #efefef;
  opacity: 0.6;
}

/* ==============================
スマホ
============================== */
@media screen and (max-width: 767px) {
  /* ------------------------------
	サンプル動画
	------------------------------ */
  main .sample_movie iframe {
    width: min(100%, 476px);
    aspect-ratio: 3 / 2;
  }

  /* ------------------------------
	サンプル画像
	------------------------------ */
  main .review_sample {
    flex-direction: column;
    align-items: center;
  }
  main .review_sample.landscape > img {
    max-width: 800px;
  }
  main .review_sample.portrait > img {
    max-width: 598px;
  }
}

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

/* ==============================
タブレット以上
============================== */
@media screen and (min-width: 768px) {
  /* ------------------------------
	サンプル動画
	------------------------------ */
  main .sample_movie iframe {
    width: 476px;
    height: 306px;
  }

  /* ------------------------------
	サンプル画像
	------------------------------ */
  main .review_sample {
    flex-wrap: wrap;
  }
  main .review_sample.landscape > img {
    width: min(calc((100% - 4px) / 2), 650px);
  }
  main .review_sample.portrait > img {
    width: min(calc((100% - 4px) / 2), 533px);
  }
}

/* ==============================
タブレット以下
============================== */
@media screen and (max-width: 959px) {
  /* ------------------------------
	★評価
	------------------------------ */
  main .rating_container p {
    padding: 8px 0;
  }

  /* ------------------------------
	aside
	------------------------------ */
  /* 女優の画像ギャラリーへのリンク */
  .aside_link_container.actress a {
    padding: 24px 16px;
  }
}

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

/* ==============================
ノートパソコン以下
============================== */
@media screen and (max-width: 1280px) {
  /* ------------------------------
	サンプル動画
	------------------------------ */
  main .sample_movie {
    text-align: center;
  }
}

/* ==============================
デスクトップ
============================== */
@media screen and (min-width: 1281px) {
  /* ------------------------------
	サンプル動画ボックス
	------------------------------ */
  main .sample_movie_container {
    display: flex;
    align-items: center;
  }
  main .sample_movie_container > .button_wrapper {
    flex: 1;
  }
}

/* ==============================
パソコン
============================== */
@media screen and (min-width: 960px) {
  /* ------------------------------
	レイアウト
	------------------------------ */
  .contents > .flex_container {
    display: flex;
    gap: 0.5rem;
  }
  aside {
    flex: 0 0 250px;
  }

  /* ------------------------------
	aside
	------------------------------ */
  /* 女優の画像ギャラリーへのリンク */
  .aside_link_container.actress a {
    padding: 16px;
  }
}