@charset "utf-8";
/* CSS Document */

/* ==================================================
 DLsite.com Touch Work Style
================================================== */

/*
  作品詳細ヘッダー
    - 注意文
    - 王冠・評価・DL数
    - 価格とボタン
    - キャンペーン対象
    - 推奨アプリのご案内
    - 体験版ダウンロード

  作品情報
    - 切り替えタブ
    - 作品情報
    - 作品内容
    - バージョンアップ情報

  作品レビュー
    - レビューのご案内
    - レビュー一覧

  作品詳細フッター
    - 同一サークル作品
    - 開催中のキャンペーン一覧
    - サンプル画像HTML版
*/

/* ==================================================
 作品詳細ヘッダー
================================================== */
.work_header .base_title {
  display: table;
  padding: 12px 12px 8px;
}

.work_header .base_title h1 {
  display: table-cell;
  font-size: 16px;
  line-height: 1.4;
  vertical-align: top;
  width: 100%;
  padding-right: 5px;
  box-sizing: border-box;
}

/* 注意文（○○専用作品）
-------------------------------------------------- */
p.flag_eocs {
  display: inline-block;
  height: auto;
  color: #fff;
  font-size: 10px;
  padding: 0 3px;
  margin-left: 8px;
  border-radius: 3px;
}

p.work_alert,
p.flag_pc,
p.flag_mode,
p.work_already,
p.work_ana {
  display: block;
  height: auto;
  line-height: 1.4;
  color: #c00;
  font-size: 12px;
  padding: 8px;
  margin: 12px 12px 0;
  border: 1px solid #c00;
  background-color: #fff;
}

/* 王冠・評価・DL数
-------------------------------------------------- */

/* 評価 */
.work_value {
  width: 100%;
  display: -moz-box;
  display: -webkit-box;
  padding: 0 12px 4px;
  box-sizing: border-box;
}

/* 王冠 */
.work_rankin {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
}

.work_rankin p {
  display: none;
}

.work_rankin p.crown_hour { background: url(../../images/web/common/icon_crown_hour.png) center center no-repeat; }
.work_rankin p.crown_week { background: url(../../images/web/common/icon_crown_week.png) center center no-repeat; }
.work_rankin p.crown_month { background: url(../../images/web/common/icon_crown_month.png) center center no-repeat; }
.work_rankin p.crown_year { background: url(../../images/web/common/icon_crown_year.png) center center no-repeat; }
.work_rankin p.crown_total { background: url(../../images/web/common/icon_crown_total.png) center center no-repeat; }

.work_rankin p.crown_hour,
.work_rankin p.crown_week,
.work_rankin p.crown_month,
.work_rankin p.crown_year,
.work_rankin p.crown_total {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 1px;
  background-size: 20px 20px;
}

/* ダウンロード数 */
.work_dl {
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  padding-left: 10px;
}

/* 価格とボタン
-------------------------------------------------- */
.work_buy_box {
  width: 100%;
  border-top: 1px dotted #ccc;
  padding: 10px 0;
  margin: 0 auto;
}

.work_price_info {
  padding: 0 12px 10px;
  position: relative;
}

.work_buy_type.choice {
  border: 1px solid #ccc;
  padding: 10px 10px 10px 0;
}

.work_buy_type.choice .work_buy_container {
  position: relative;
  padding-left: 45px;
}

.work_buy_type.choice.download .work_buy_container {
  padding-left: 10px;
}

.work_buy_type.select {
  background: #fff9d9;
}

.work_buy_type.disabled {
  background: #fafafa; 
}

.work_buy_type.choice:first-child {
  border-radius: 4px 4px 0 0;
}

.work_buy_type.choice:last-child {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.work_buy_type .type_label {
  margin: 3px 0;
}

.work_buy_type .type_label::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #9d9d9d;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 10px;
  top: -3px;
}

.work_buy_type .type_label::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 16px;
  margin-top: -12px;
}

.work_buy_type.select .type_label::before {
  box-shadow : 0 0 3px #e58600;
}

.work_buy_type.select .type_label::after  {
  background: #e58600;
}

.work_buy_type.disabled .type_label::before {
  border: 1px solid #ccc;
}

.work_buy_type input[type="radio"] {
  display: none;
}

.work_buy_type input[type="radio"] + label {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.work_buy_type input[type="radio"]:checked + label {
  color: #e58600;
}

.work_buy_type input[type="radio"]:disabled + label {
  color: #999;
  cursor: default;
}

.work_buy_type p.label_static {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin: 4px 0;
}

.work_buy_body {
  display: table;
  color: #333;
  font-size: 13px;
  text-align: center;
  padding: 4px 0;
  width: 100%;
  table-layout: fixed;
}

.work_buy_body .guide_rental {
  border-radius: 3px;
  background: #eee;
  color: #666;
  margin: 5px 0 0 10px; 
  padding: 8px;
  font-size: 12px;
  text-align: left;
  line-height: 1.3;
}

.work_buy_type.not_select .work_buy_body .guide_rental {
  margin-left: 0;
}

.work_buy_body .work_buy_label {
  display: table-cell;
  width: 80px;
  color: #333;
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
  text-align: right;
}

.work_buy_body .work_buy_label:after {
 content: ":";
 padding-left: 2px;
 text-align: right;
}

.work_ana .work_buy_body .work_buy_label {
  display: block;
  text-align: center;
}

.work_buy_body .work_buy_content {
  display: table-cell;
  text-align: left;
  padding-left: 8px;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}

.work_ana .work_buy_body .work_buy_content {
  display: block;
  padding: 5px 0 0;
  text-align: center;
}

.work_buy_body i {
  padding-left: 2px;
  font-style: normal;
}

/* ----- 価格・ポイント・レンタル期間 ----- */
.work_buy_body .price {
  display: inline-block;
  color: #c00;
  font-size: 20px;
  font-weight: bold;
}

.work_buy_type.disabled .price,
.work_buy_type.disabled .rental_period,
.work_buy_type.disabled .rental_period select {
  color: #999;
}

.work_buy_body .price i {
 font-weight: bold;
 font-size: 0.9em;
}

.work_ana .work_buy_body .price {
  display: block;
  text-align: center;
}

.work_buy_body .price .discount_rate {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  padding-left: 3px;
}

.work_buy_body .date_ana {
  color: #930;
  font-size: 16px;
  font-weight: bold;
}

.work_buy_body .work_point {
  display: inline-block;
  color: #093;
  font-size: 15px;
}

.work_buy_body .work_point i {
  font-size: 13px;
}

 .work_buy_body strong.work_point i {
  font-weight: bold;
 }

.work_buy_body .strike {
  color: #333;
  font-size: 14px;
  font-weight: normal;
}

.work_buy_body .rental_period {
  display: inline-block;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
}

.rental_period select {
  padding: 2px 5px;
  border-radius: 3px;
}

.rental_period select:disabled {
  background: #eee;
  color: #999;
}

.work_price_info p strong.date_ana {
  color: #930;
  font-size: 13px;
  font-weight: bold;
}

.work_price_info p span {
  color: #c00;
}

.work_buy_btn p.message_cart_in {
  position: relative;
  display: inline-block;
  min-width: 160px;
  padding: 8px 10px;
  margin: 0 auto 10px;
  border: 2px solid #f1963c;
  border-radius: 3px;
  background: #fff;
  color: #f17700;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.work_buy_btn p.message_cart_in:before,
.work_buy_btn p.message_cart_in:after {
  position: absolute;
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
  border: solid transparent;
  border-width: 6px;
  content: "";
}

.work_buy_btn p.message_cart_in:before {
  border-top-color: #f1963c;
  margin-left: -6px;
}

.work_buy_btn p.message_cart_in span {
  font-weight: bold;
  padding-right: 3px;
}

.work_buy_btn p.message_cart_in:after {
  border-top-color: #fff;
  margin: -2px 0 0 -6px;
}


/* 特集記事から詳細へのリンク */
.work_detail {
  margin-top: 12px;
}

/* ----- カート・お気に入りボタン ----- */
.work_buy_btn {
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
}

.work_buy_btn p.work_cart,
.work_buy_btn p.work_stream {
  text-align: center;
  height: 44px;
  margin-bottom: 8px;
}

.work_buy_btn p.work_cart a,
.work_buy_btn p.work_stream a,
.work_buy_btn p.work_favorite a{
  display: block;
  width: 100%;
  border-radius: 4px;
  border: solid 1px #c00;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}

.work_buy_btn p.work_cart a,
.work_buy_btn p.work_stream a {
  font-size: 16px;
  line-height: 40px;
  height: 44px;
}

.work_buy_btn p.work_cart a.btn_cart {
  font-size: 16px;
  background: #cc2936;
  background: -webkit-linear-gradient(top, #e6505d 0%, #cc2936 100%);
  background: linear-gradient(to bottom, #e6505d 0%, #cc2936 100%);
  border-color: #b32430;
}

.work_buy_btn p.work_cart a.btn_cart_in {
  background: #cc525c;
  background: -webkit-linear-gradient(top, #d95762 0%, #cc525c 100%);
  background: linear-gradient(to bottom, #d95762 0%, #cc525c 100%);
  border-color: #b34750;
  color: #f2c2c6;
}

.work_buy_btn p.work_cart a.btn_dl {
  background: #734dbf;
  background: -webkit-linear-gradient(top, #9877d9 0%, #734dbf 100%);
  background: linear-gradient(to bottom, #9877d9 0%, #734dbf 100%);
  border-color: #6342a6;
}

.work_buy_btn p.work_cart a.btn_dl_no {
  background: #ccc;
  cursor: default;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-color: #acacac;
  color: #fff;  
}

.work_buy_btn p.work_cart a.btn_st,
.work_buy_btn p.work_stream a.btn_st {
  background: #39a9bf;
  background: -webkit-linear-gradient(top, #62c5d9 0%, #39a9bf 100%);
  background: linear-gradient(to bottom, #62c5d9 0%, #39a9bf 100%);
  border-color: #3292a6;
}

.work_buy_btn p.work_favorite a.btn_favorite{
  font-size: 13px;
  line-height: 31px;
  height: 34px;
  background: #ddd;
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #ddd 100%);
  background: linear-gradient(to bottom, #f7f7f7 0%, #ddd 100%);
  border-color: #aaa;
  color: #333;
}

.work_buy_btn p.work_favorite a.btn_favorite_in {
  background: #ccc;
  background: -webkit-linear-gradient(top, #ddd 0%, #ccc 100%);
  background: linear-gradient(to bottom, #ddd 0%, #ccc 100%);
  border-color: #aaa;
  color: #888;
}

.work_buy_btn p.work_cart a::before,
.work_buy_btn p.work_stream a::before,
.work_buy_btn p.work_favorite a::before {
  display: inline-block;
  margin-right: 8px;
  font-family: 'dlsite-icons';
  font-size: 16px;
}

.work_buy_btn p.work_cart a.btn_cart::before {
  content: "\e900";
}

.work_buy_btn p.work_favorite a::before {
  content: "\e902";
  font-size: 14px;
}

.work_buy_btn p.work_favorite a.btn_favorite_in::before {
  content: "\e903";
}

.work_buy_btn table.work_fav_sns td {
  vertical-align: top;
}

.work_buy_btn table.work_fav_sns td:first-child {
  width: 100%;
  padding-right: 12px;
}

/* キャンペーン対象
-------------------------------------------------- */
.work_buy_box .campaign_info {
  margin: 0 12px 8px;
}

.work_buy_box .campaign_info p {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: 3px;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-align: center;
 }
 
 .work_buy_box .campaign_info p > span,
 .work_buy_box .campaign_info p a > span {
   display: inline-block;
   padding: 6px 0;
   font-weight: bold;
 }

.work_buy_box .campaign_info p.type_sale {
  background: #c00;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #c00;
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #c00;
  background: linear-gradient(45deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #c00;
  background-size: 20px 20px;
}

.work_buy_box .campaign_info p.type_point {
  background: #093;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.12) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #093;
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.12) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #093;
  background: linear-gradient(45deg, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.12) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #093;
  background-size: 20px 20px; 
}

.work_buy_box .campaign_info p.type_rental {
  background: #fe7d00;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #fe7d00;
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #fe7d00;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%, rgba(0,0,0,0), rgba(0,0,0,0) 100%), #fe7d00;
  background-size: 20px 20px; 
}

.work_buy_box .campaign_info p a {
  display: block;
  color: #fff;
  text-decoration: none;
}

.work_buy_box .campaign_info p.type_sale a {
  text-shadow: 	2px 2px 2px #c00,	2px -2px 2px #c00,	-2px 2px 2px #c00,	-2px -2px 2px #c00;
}

.work_buy_box .campaign_info p.type_point a {
  text-shadow: 	2px 2px 2px #093,	2px -2px 2px #093,	-2px 2px 2px #093,	-2px -2px 2px #093;
}

.work_buy_box .campaign_info p.type_rental{
  text-shadow: 	2px 2px 2px #fe7d00,	2px -2px 2px #fe7d00,	-2px 2px 2px #fe7d00,	-2px -2px 2px #fe7d00;
}

.work_buy_box .campaign_info p span.period {
  padding-left: 7px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: none;
  vertical-align: bottom;
}

.work_buy_box .campaign_info p.type_rental span.period {
  color: #a45100;
  font-weight: normal;
 }

.work_buy_box .campaign_info p a span.period::after {
  content: "";
  display: inline-block;
  margin-left: 5px;
  background: url(../../images/web/common/icon_link_blank_03_touch.gif) no-repeat 0 0;
  background-size: 11px 11px;
  width: 11px;
  height: 11px;
}

.work_buy_box .campaign_info p span.limit {
  display: inline-block;
  border-radius: 8px;
  padding: 0 10px;
  margin-top: 5px;
  height:18px;
  line-height: 18px;
  background: #fff;
  font-size: 12px;
  color: #a45100;
  text-shadow: none;
  font-weight: bold;
}

/* 推奨アプリのご案内
-------------------------------------------------- */
p.notice_app {
  line-height: 1.4;
  color: #666;
  font-size: 12px;
  margin: 0 12px 16px;
}

p.notice_app.attention {
  color: #c00;
}

.notice_app + .notice_app {
 margin-top: -13px;
}

p.infomail_guide {
  font-size: 11px;
  width: 170px;
  line-height: 1.3;
  margin: 6px auto 0;
  color: #666;
}

.work_buy_box .work_btn {
  margin: 12px 12px 0;
}

/* 体験版ダウンロード
-------------------------------------------------- */
.work_trial {
  padding: 0 12px 12px;
}
.work_trial table {
  width: 100%;
  border: 1px solid #ddd;
}

.work_trial th {
  width: 50px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  background-color: #f5f5f5;
}

.work_trial td {
  line-height: 1.3;
  font-size: 11px;
  vertical-align: middle;
  padding: 8px;
  border-left: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
}

.work_trial tr:last-child td {
  border-bottom: 1px solid #ddd;
}

.work_trial td span {
  display: inline-block;
  padding-left: 2px;
}

.work_trial a {
  display: block;
  width: 100%;
  min-width: 88px;
  height: 30px;
  line-height: 30px;
  color: #333;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  border: solid 1px #d99816;
  box-sizing: border-box;
  background: #f2aa18;
  background: -webkit-linear-gradient(top, #fc3 0%, #f2aa18 100%);
  background: linear-gradient(to bottom, #fc3 0%, #f2aa18 100%);
  word-wrap: break-word;
  word-break: break-all;
}

/* ----- 英語版作品詳細への切り替え案内 ----- */
.eng_lead_message {
  margin: 0 12px 8px;
}

.eng_lead_message p {
  line-height: 1.5;
  color: #1476b1;
  font-size: 14px;
  font-family: helvetica,arial,verdana,sans-serif;
  text-align: center;
  border-radius: 5px;
  border: 2px dotted #51a7c3;
  background: #ddf8ff;
}

.eng_lead_message p a {
  display: block;
  color: #0067a5;
  padding: 12px;
}

/* ----- 販売終了 ----- */
p.work_sales_end {
  width: 180px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #5c7099;
  border-radius: 15px;
}

/* ----- PCのみのメッセージ ----- */
p.message_pc {
  display: block;
  width: 290px;
  text-align: center;
  margin: 5px auto;
  border-radius: 3px;
  border: 1px solid #d94c63;
  background: #d94c63;
}

p.message_pc span {
  display: inline-block;
  line-height: 1.4;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}

p.message_pc a {
  color: #fff;
}

/* ==================================================
 作品情報
================================================== */

/* 切り替えタブ
-------------------------------------------------- */
.work_content_tab {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.style_home .work_content_tab { border-bottom: 4px solid #83c840; }
.style_comic .work_content_tab { border-bottom: 4px solid #e57285; }
.style_maniax .work_content_tab { border-bottom: 4px solid #75baeb; }
.style_pro .work_content_tab { border-bottom: 4px solid #e075ab; }
.style_books .work_content_tab { border-bottom: 4px solid #5aad5f; }

.work_content_tab li {
  display: table-cell;
  vertical-align: middle;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.work_content_tab li:first-child {
  border-left-width: 4px;
}
.work_content_tab li:last-child {
  border-right-width: 4px;
}

.work_content_tab li a {
  display: block;
}

.work_content_tab li p {
  color: #4d6594;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  text-align: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #e6ebf5;
}

.style_home .work_content_tab li.selected p { color: #fff; background-color: #83c840; }
.style_comic .work_content_tab li.selected p { color: #fff; background-color: #e57285; }
.style_maniax .work_content_tab li.selected p { color: #fff; background-color: #75baeb; }
.style_pro .work_content_tab li.selected p { color: #fff; background-color: #e075ab; }
.style_books .work_content_tab li.selected p { color: #fff; background-color: #5aad5f; }

.work_content_tab li.disabled p {
  color: #fff;
  background-color: #ccc;
}

.work_content_tab li p span {
  padding-left: 4px;
}

/* 予告の場合 */
.work_content_tab li:only-child {
  border: none;
}
.work_content_tab li:only-child p {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  text-align: left;
  border-radius: 0;
  padding: 4px 8px 0;
}

/* 作品情報
-------------------------------------------------- */
.work_info_box {
}

/* ----- 作品情報その1 ----- */
.work_outline {
  line-height: 1.4;
  font-size: 13px;
  margin: 12px 8px;
}

.work_outline:after {
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
  font-size: 0;
}

.work_outline dt {
  float: left;
  width: 7em;
  text-align: right;
}
.work_outline dt:after {
  content: " : ";
}
.work_outline dd {
  margin-left: 7.5em;
  margin-bottom: 0.2em;
}
.work_outline dd a {
  padding-right: 8px;
}
.work_outline .work_genre span {
  font-size: 11px;
}

/* 特設バナー */
div#work_streaming {
  text-align: center;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

div#work_streaming img {
  max-width: 300px;
}

@media screen and (min-width:360px) { 
/* 画面サイズが360pxからはここを読み込む */
div#work_streaming img { max-width: 350px; }
}

/* ----- 作品情報その2 ----- */
.work_spec {
  padding: 0 12px 12px;
}

.work_spec table {
  width: 100%;
  border: 1px solid #ddd;
}

.work_spec th,
.work_spec td {
  line-height: 1.3;
  font-size: 12px;
  border-bottom: 1px dotted #ddd;
}

.work_spec tr:last-child th,
.work_spec tr:last-child td {
  border-bottom: none;
}

.work_spec th {
  width: 90px;
  text-align: right;
  padding: 6px 6px 6px 0;
  border-right: 1px dotted #ddd;
  background-color: #f5f5f5;
}

.work_spec td {
  padding: 6px;
  word-break: break-all;
}

/* ----- 閲覧可能な環境 ----- */
#work_device_guide {
  padding: 0 12px 12px;
}

#work_device_guide p {
  text-align: left;
  margin: 12px 0 0;
  line-height: 1.4;
  font-size: 12px;
}

#work_device_guide table {
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ddd;
}

#work_device_guide th,
#work_device_guide td {
  line-height: 1.3;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted #ddd;
}

#work_device_guide th {
  border-left: 1px dotted #ddd;
  background: #f5f5f5;
}

#work_device_guide td {
  border-left: 1px dotted #ddd;
}

#work_device_guide td.label {
  padding: 0 10px;
}

#work_device_guide > table td span {
  display: block;
  text-align: center;
}

#work_device_guide > table td span::before {
  display: inline-block;
  box-sizing: border-box;
  content: "";
}

#work_device_guide > table td span.dev_play::before {
  width: 14px;
  height: 14px;
  border: solid 2px #777777;
  border-radius: 50%;
}

#work_device_guide > table td span.dev_play_no::before {
  width: 10px;
  height: 0;
  padding-top: 6px;
  margin-top: 6px;
  border-top: solid 1px #777777;
}

#work_device_guide tr.on_dev th,
#work_device_guide tr.on_dev td {
  background-color: #fffceb;
  color: #ef7700;
  font-weight: bold;
}

#work_device_guide > table tr.on_dev td span.dev_play::before,
#work_device_guide > table tr.on_dev td span.dev_play_no::before {
  border-color: #ef7700;
}

/* 作品内容
-------------------------------------------------- */
.work_story {
}
.work_device {
}

.work_story h1,
.work_device h1,
.work_pack h1 {
  display: block;
  height: 40px;
  line-height: 40px;
  color: #4d6594;
  font-size: 14px;
  padding: 0 30px 0 8px;
  background-color: #e6ebf5;
}

.work_story div,
.work_device div {
  padding: 12px 12px;
}

.work_story p,
.work_device p {
  line-height: 1.5;
  font-size: 13px;
  padding: 0 0 12px;
}

/* ----- カスタムパーツ ----- */
.work_parts {
  margin: 0 0 12px;
}
.work_parts h1 {
  background-color: #e6ebf5;
}

.work_parts h1 span {
  position: relative;
  display: block;
  height: 40px;
  line-height: 40px;
  color: #4d6594;
  font-size: 14px;
  padding: 0 40px 0 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.work_parts h1 span:after {
  position: absolute;
  right: 12px;
  top: 12px;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../../images/web/hometouch/icon_layout.png) 0 -169px no-repeat;
  background-size: 17px 588px;
}

.work_parts h1 span.open:after {
  background-position: 0 -57px;
}

.parts_contents {
  line-height: 1.5;
  font-size: 13px;
  padding: 12px 12px;
}

.work_parts ul,
.work_parts ol {
}

.parts_contents ul li,
.parts_contents ol li {
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
}

.parts_contents ul li:first-child,
.parts_contents ol li:first-child {
  padding-top: 0;
}

.parts_contents ul li:last-child,
.parts_contents ol li:last-child {
  border-bottom: none;
}

.parts_contents ol li p:first-child {
  font-size: 14px;
  padding-bottom: 2px;
}

.parts_contents ol li p span {
  padding-right: 4px;
}

.parts_contents p.image {
  display: block;
  text-align: center;
  margin-bottom: 6px;
}

.parts_contents p.image img {
  max-width: 100%;
}

.parts_contents p.text {
  margin-bottom: 12px;
}

.parts_contents p:nth-last-child(1) {
  margin-bottom: 0;
}

/* パック販売
-------------------------------------------------- */
/*----- 作品詳細 親パックリスト -----*/
.work_pack.pack_parent {
  margin: 0 12px 16px;
  border: solid 1px #ddd;
}

.work_pack.pack_parent > p {
  height: 40px;
  padding: 0 12px;
  background-color: #f5f5f5;
  font-size: 12px;
  line-height: 40px;
}

/*----- 作品詳細 子作品リスト（レコメンドのスタイルを流用） -----*/
.work_pack ul.work_img_list {
  padding: 0 4px;
}

.work_pack ul.work_img_list > li {
  min-height: 0;
}

.work_pack ul.work_img_list dl dt.work_thumb {
  margin-bottom: 6px;
}

.work_pack ul.work_img_list dl dt.work_thumb img {
  width: auto;
  max-width: 90px;
  max-height: 90px;
}

.work_pack ul.work_img_list dl dd.work_name {
  font-size: 11px;
  line-height: 1.2;
  max-height: 25px;
  margin-bottom: 3px;
}

.work_pack ul.work_img_list dl dd.maker_name {
  font-size: 10px;
  height: 13px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work_pack ul.work_img_list dl dd.work_price {
  color: #c00;
  font-size: 12px;
  margin-bottom: 2px;
}

.work_pack ul.work_img_list dl dd.work_deals,
.work_pack .work_operation {
  display: none;
}

/* バージョンアップ情報
-------------------------------------------------- */
.parts_contents.version_up {
  text-align: right;
}

.parts_contents.version_up ul {
  text-align: left;
  margin-bottom: 5px;
}

.parts_contents.version_up dl dt {
  display: table-cell;
  line-height: 16px;
  margin: 0;
  width: 90px;
  text-align: left;
}

.parts_contents.version_up dl dd {
  display: table-cell;
  margin: 0;
}

.parts_contents.version_up dl dd span {
  display: inline-block;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
  padding: 0 4px;
  background: #4d6594;
  color: #fff;
  margin: 0 3px 2px 0;
}

.parts_contents.version_up dl dd.ver_up_comment {
  width: 100%;
  margin: 0;
  display: block;
  padding: 3px 0 0;
}

.parts_contents.version_up div.version_up_more {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  color: #333;
  font-size: 14px;
  text-align: center;
  padding: 0 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* ==================================================
 作品レビュー
================================================== */

/* レビューのご案内
-------------------------------------------------- */

.work_review_box {
  background-color: #f5f5f5;
}

/* レビューを投稿するボタン */
.work_review,
.work_review_already {
  text-align: center;
  margin: 10px 10px 0;
}

.work_review a,
.work_review_already a {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 6px;
  -moz-box-shadow: 0 -2px 1px 0 rgba(0,0,0,0.2) inset;
  -webkit-box-shadow: 0 -2px 1px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 0 -2px 1px 0 rgba(0,0,0,0.2) inset;
}

.work_review a {
  background: #fa8c1e;
}

/* レビュー件数 */
.review_count { padding: 8px 12px; }
.review_count strong { color: #930; }

.review_count span {
  color: #999;
  font-size: 12px;
}

.review_total_box {
  font-size: 13px;
  padding: 0 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.review_total_box p { color: #d9415a; }

/* レビューを報告する */

#review_report .work_review_box {
  padding-top: 10px;
}

/* レビュー一覧
-------------------------------------------------- */
.work_review_box ul {
  padding: 0 8px 15px;
}

.work_review_box ul li {
  color: #333;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.work_review_box ul li:last-child {
  margin-bottom: 0;
}

/* ==================================================
 作品詳細フッター
================================================== */

/* 同一サークル作品
-------------------------------------------------- */
.recommend_list h2 {
  display: block;
  color: #4d6594;
  background: #e6ebf5;
  font-size: 14px;
  /*padding: 6px 8px;*/
  padding: 0 8px;
  height: 40px;
  line-height: 40px;
}

/* 開催中のキャンペーン一覧
-------------------------------------------------- */
.campaign_list {
}
.campaign_list ul {
  padding: 12px 0;
}
.campaign_list li {
  text-align: center;
  margin-bottom: 6px;
}
.campaign_list li:last-child {
  margin-bottom: 0;
}

/* サンプル画像HTML版
-------------------------------------------------- */
.sample_container_02 {
  position: relative;
  padding-bottom: 90px;
}

.sample_status {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
  color: #fff;
  background: #4d6594;
}

.sample_status h1 {
  color: #fff;
  font-size: 13px;
  padding: 12px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sample_status ul {
  display: table;
  margin: 0 auto;
}

.sample_status li {
  display: table-cell;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

.sample_status li:first-child,
.sample_status li:last-child {
  width: 100px;
  border-radius: 6px;
  background: #f5f5f5;
  box-shadow: 0 -2px 1px 0 rgba(0,0,0,0.2) inset;
}

.sample_status li.disabled {
  visibility: hidden;
  width: 100px;
  color: #fff;
  background: none;
  box-shadow: none;
}

.sample_status li.page {
  width: 90px;
}

.sample_status li a {
  display: block;
  height: 36px;
  line-height: 36px;
  color: #333;
}

.sample_image {
}