@charset "UTF-8";
/* ==================================================================
   シリウス2×FANZA 女優サイト用スタイル
   ------------------------------------------------------------------
   【貼り付け場所】
   シリウス2の上部メニュー「テンプレート」→「スタイルシート編集」
   → 開いたウィンドウ上部のタブ「ユーザー指定スタイル」
   → その中身の一番下に、このファイルの内容を全部貼り付けて「保存」

   「メインスタイル」ではなく「ユーザー指定スタイル」に入れること。
   メインスタイルはテンプレート自体のCSSなので、テンプレートを変更・更新
   すると上書きされて消えてしまう。

   【テンプレートが複数ある場合】
   シリウス2のテンプレートは種類ごとにCSSが違うため、テンプレート側の
   指定に負けて見た目が崩れることがある。
   それを防ぐため、このCSSは
     ・すべて .fj-article の中だけに効くよう限定
     ・テンプレートに上書きされやすい箇所には !important を付与
     ・冒頭でテンプレートの影響を打ち消すリセットを実施
   という作りにしてある。
   サイトを増やすたびに、そのサイトの「ユーザー指定スタイル」へ
   同じものを貼り付ける。

   色を変えたいときは、下の「色の設定」の値だけ書き換えれば全体に効く。
   ================================================================== */


/* ------------------------------------------------------------------
   色の設定（ここだけ変えれば全体の色が変わります）
   ------------------------------------------------------------------ */
.fj-article {
  --fj-accent: #e4007f;          /* FANZAっぽいピンク。ボタンや価格に使用 */
  --fj-campaign-bg: #fff4e5;     /* キャンペーン帯の背景 */
  --fj-campaign-border: #ff9800; /* キャンペーン帯の枠線 */
  --fj-campaign-text: #d84315;   /* キャンペーンの文字色 */
  --fj-box-bg: #f7f7f7;          /* 表やFAQの背景 */
  --fj-border: #e0e0e0;          /* 罫線 */
  --fj-text-sub: #666666;        /* 補足の文字色 */
  --fj-star: #f5a623;            /* レビューの星の色 */
}


/* ------------------------------------------------------------------
   リセット
   テンプレートごとの指定を打ち消して、どのテンプレートでも
   同じ見た目になるようにする。
   ------------------------------------------------------------------ */
.fj-article,
.fj-article * {
  box-sizing: border-box;
}

.fj-article {
  width: 100%;
}

/* 画像がテンプレート側で固定幅にされていても、はみ出さないようにする */
.fj-article img {
  max-width: 100% !important;
  height: auto !important;
  border: none !important;
}

/* テンプレートが表に独自の装飾をしていても打ち消す */
.fj-article table {
  border-collapse: collapse !important;
  width: 100% !important;
  background: none !important;
  border: none;
}

.fj-article table th,
.fj-article table td {
  background: none;
  vertical-align: top;
}

/* テンプレートによっては th を中央寄せにしているため左寄せに戻す */
.fj-article table th {
  text-align: left !important;
}

/* 縞模様（奇数行の背景色）を付けるテンプレート対策 */
.fj-article table tr:nth-child(odd) td,
.fj-article table tr:nth-child(even) td {
  background: none;
}


/* ------------------------------------------------------------------
   見出し
   ------------------------------------------------------------------ */
.fj-article .fj-h2 {
  font-size: 1.25em !important;
  margin: 28px 0 12px !important;
  padding: 0 0 0 10px !important;
  border: none !important;
  border-left: 5px solid var(--fj-accent) !important;
  background: none !important;
  color: inherit;
}


/* ------------------------------------------------------------------
   パッケージ画像とNEWバッジ
   ------------------------------------------------------------------ */
.fj-article .fj-hero {
  position: relative;
  width: 100%;
  text-align: center;
  margin: 0 0 20px;
}

.fj-article .fj-hero-img {
  display: block;
  margin: 0 auto;
}

.fj-article .fj-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--fj-accent);
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 3px;
}


/* ------------------------------------------------------------------
   価格カード（キャンペーン帯 ＋ 価格・レビュー）
   ------------------------------------------------------------------ */
.fj-article .fj-pricecard {
  border: 1px solid var(--fj-border);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 20px;
}

.fj-article .fj-campaign {
  background: var(--fj-campaign-bg) !important;
  border-bottom: 2px solid var(--fj-campaign-border);
  padding: 10px 16px;
  text-align: center;
  line-height: 1.6;
}

.fj-article .fj-campaign-title {
  color: var(--fj-campaign-text) !important;
  font-size: 1.05em;
  font-weight: bold;
}

.fj-article .fj-campaign-end {
  display: inline-block;
  font-size: 0.85em;
  color: #8d4b20;
  margin-left: 10px;
  white-space: nowrap;
}

.fj-article .fj-pricebody {
  background: var(--fj-box-bg) !important;
  padding: 14px 16px;
}

.fj-article .fj-pricetable th {
  width: 90px;
  padding: 6px 12px 6px 0 !important;
  white-space: nowrap;
  color: var(--fj-text-sub) !important;
  font-weight: normal !important;
  border: none !important;
}

.fj-article .fj-pricetable td {
  padding: 6px 0 !important;
  border: none !important;
}

.fj-article .fj-price {
  color: var(--fj-accent) !important;
  font-size: 1.3em;
  font-weight: bold;
}

.fj-article .fj-price-list {
  color: var(--fj-text-sub) !important;
  text-decoration: line-through !important;
}

.fj-article .fj-stars {
  color: var(--fj-star) !important;
  font-size: 1.1em;
}


/* ------------------------------------------------------------------
   アフィリエイトボタン
   テンプレートのリンク色指定に負けやすいので !important を多めに付ける
   ------------------------------------------------------------------ */
.fj-article .fj-cta {
  text-align: center;
  margin: 24px 0;
}

.fj-article .fj-cta-btn,
.fj-article .fj-cta-btn:link,
.fj-article .fj-cta-btn:visited {
  display: inline-block !important;
  background: var(--fj-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 1.05em;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  border: none !important;
  line-height: 1.4;
}

.fj-article .fj-cta-btn:hover {
  opacity: 0.85;
  color: #fff !important;
}


/* ------------------------------------------------------------------
   サンプル動画
   ------------------------------------------------------------------ */
.fj-article .fj-movie {
  width: 100%;
  padding-top: 75%;
  position: relative;
  margin: 0 0 20px;
}

.fj-article .fj-movie iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}


/* ------------------------------------------------------------------
   作品情報の表
   ------------------------------------------------------------------ */
.fj-article .fj-spec {
  margin: 0 0 24px !important;
  font-size: 0.95em;
}

.fj-article .fj-spec th {
  width: 110px;
  padding: 12px 14px !important;
  background: var(--fj-box-bg) !important;
  border: 1px solid var(--fj-border) !important;
  font-weight: bold !important;
  white-space: nowrap;
}

.fj-article .fj-spec td {
  padding: 12px 14px !important;
  border: 1px solid var(--fj-border) !important;
  line-height: 1.7;
}


/* ------------------------------------------------------------------
   サンプル画像とレビュー本文
   ------------------------------------------------------------------ */
.fj-article .fj-sample-img {
  display: block;
  margin: 0 auto 12px;
}

/* fj-text は現在使用していない(divで囲むと本文が消える現象のため廃止)。
   互換のため残してあるが、新しく生成されるページには付かない。 */
.fj-article .fj-text {
  margin: 18px 0 24px;
}

.fj-article .fj-text p {
  line-height: 1.9;
  margin: 0 0 1.2em;
  text-indent: 0;
}


/* ------------------------------------------------------------------
   レビュー本文（CSVから入る文章）用のスタイル
   ------------------------------------------------------------------
   以前は <div class="fj-text"> で囲んでいたが、シリウス2が本文を
   確定させる際にこの<div>ごと中身を消してしまう現象が確認されたため、
   囲むのをやめて素のタグのまま流し込む方式に変更した。
   そのため、CSVの文章に含まれる素の <h2>/<h3>/<p> にも
   見た目が付くよう、ここでスタイルを当てておく。

   .fj-h2（当ツールが生成する見出し）と衝突しないよう :not() で除外。
   ------------------------------------------------------------------ */
.fj-article p {
  line-height: 1.9;
  margin: 0 0 1.2em;
}

.fj-article h2:not(.fj-h2) {
  font-size: 1.15em;
  margin: 28px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--fj-accent);
}

.fj-article h3 {
  font-size: 1.05em;
  margin: 20px 0 10px;
  color: var(--fj-accent);
}

.fj-article ul,
.fj-article ol {
  margin: 0 0 1.2em;
  padding-left: 1.6em;
  line-height: 1.8;
}


/* ------------------------------------------------------------------
   関連作品
   ------------------------------------------------------------------ */
.fj-article .fj-related {
  padding-left: 1.4em !important;
  margin: 0 0 20px !important;
  list-style: disc !important;
  background: none !important;
}

.fj-article .fj-related li {
  margin: 0 0 10px !important;
  padding: 0 !important;
  line-height: 1.6;
  background: none !important;
  border: none !important;
  list-style: disc !important;
}

.fj-article .fj-related a {
  color: var(--fj-accent) !important;
}


/* ------------------------------------------------------------------
   よくある質問
   ------------------------------------------------------------------ */
.fj-article .fj-faq {
  background: var(--fj-box-bg) !important;
  border-radius: 6px;
  padding: 16px 18px;
  margin: 0 0 20px;
}

.fj-article .fj-faq-item {
  margin: 0 0 16px;
}

.fj-article .fj-faq-item:last-child {
  margin-bottom: 0;
}

.fj-article .fj-faq-q {
  font-weight: bold;
  margin-bottom: 6px;
}

.fj-article .fj-faq-a {
  line-height: 1.8;
}


/* ------------------------------------------------------------------
   FANZA（DMM API）のクレジット表記
   ページの一番下に入る公式バナー。
   リセットで画像に max-width:100% を強制しているが、
   もともと135pxと小さいため影響しない。
   ------------------------------------------------------------------ */
.fj-article .fj-credit {
  text-align: center;
  margin: 28px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--fj-border);
}

.fj-article .fj-credit img {
  display: inline-block;
  margin: 0 auto;
}

.fj-article .fj-credit a {
  text-decoration: none !important;
  border: none !important;
}


/* ------------------------------------------------------------------
   スマホ向けの調整
   ------------------------------------------------------------------ */
@media screen and (max-width: 600px) {
  .fj-article .fj-spec th {
    width: 80px;
    padding: 10px !important;
    font-size: 0.9em;
  }

  .fj-article .fj-spec td {
    padding: 10px !important;
  }

  .fj-article .fj-cta-btn,
  .fj-article .fj-cta-btn:link,
  .fj-article .fj-cta-btn:visited {
    display: block !important;
    padding: 14px 10px !important;
  }

  .fj-article .fj-campaign-end {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}