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

/* =========================================================
ルナソフト5周年記念キャンペーン&新作情報  特設ページ
========================================================= */

/*ヘッダー
========================================================= */

#container {
  background-color: #000;
}

#promo_header {
  width: 100%;
  height: 40px;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
}

#promo_header .logo {
  display: block;
  float: left;
  height: 22px;
  margin-left: 15px;
  position: relative;
  top: 50%;
  margin-top: -11px;
}

#promo_header .logo a {
  opacity: 1;
}
#promo_header .logo a:hover {
  opacity: 0.7;
}

#promo_header ul.simple_nav {
  font-size: 0;
  float: right;
  margin-right: 15px;
}

#promo_header #nav_login,
#promo_header ul.simple_nav li {
  display: inline-block;
  font-size: 12px;
}

#promo_header ul.simple_nav li a {
  color: #ccc;
  display: block;
  background: none;
  height: 40px;
  line-height: 40px;
  width: 100px;
  text-align: center;
}

#promo_header ul.simple_nav li a:hover {
  text-decoration: none;
  background: #c9005a;
  color: #fff;
}

/* twitterボタン */
.link_twitter {
  position: absolute;
  margin-top: 9px;
  margin-left: -88px;
}

/* 全体構成
-----------------------------------------------------*/
div#promo_luna5th {
  background: #000000;
  position: relative;
  overflow: hidden;
  top: 40px;
}

div#promo_luna5th div[class^="box_0"] {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  vertical-align: bottom;
  top: 0;
  z-index: 10;
}

div.promo_container {
  position: relative;
}

/* BOX_01
-----------------------------------------------------*/
iframe#chobit {
  width: 550px;
  position: absolute;
  top: 470px;
  left: 50%;
  margin-left: -471px;
}

/* scrollbg */
div.box_01 .luna_bg01 {
  width: 1900px;
  padding-top: 250px;
  margin-left: -50%;
  left: 50%;
  top: 0px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_bg01.jpg) repeat-x 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 5;
  animation: slideroll 50s linear infinite;
  -webkit-animation: slideroll 50s linear infinite;
}

@keyframes slideroll {
    0% { background-position: 0  0;}
    100% { background-position: -2400px 0;}
}

@-webkit-keyframes slideroll {
    0% { background-position: 0  0;}
    100% { background-position: -2400px 0;}
}


div.box_01 .luna_bg02 {
  width: 1900px;
  padding-top: 250px;
  margin-left: -50%;
  left: 50%;
  top: 250px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_bg01.jpg) repeat-x 0 -250px;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 5;
  animation: slideroll2 50s linear infinite;
  -webkit-animation: slideroll2 50s linear infinite;
}

@keyframes slideroll2 {
    0% { background-position: 0  -250px;}
    100% { background-position: 2400px -250px;}
}

@-webkit-keyframes slideroll2 {
    0% { background-position: 0  -250px;}
    100% { background-position: 2400px -250px;}
}

div.box_01 .luna_bg03 {
  width: 1900px;
  padding-top: 250px;
  margin-left: -50%;
  left: 50%;
  top: 500px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_bg01.jpg) repeat-x 0 -500px;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 5;
  animation: slideroll3 50s linear infinite;
  -webkit-animation: slideroll3 50s linear infinite;
}

@keyframes slideroll3 {
    0% { background-position: 0  -500px;}
    100% { background-position: -2400px -500px;}
}

@-webkit-keyframes slideroll3 {
    0% { background-position: 0  -500px;}
    100% { background-position: -2400px -500px;}
}

/* FV */
div.box_01 .luna_curtain {
  width: 1900px;
  padding-top: 856px;
  margin-left: -50%;
  left: 50%;
  top: -4px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_curtain.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 60;
}

div.box_01 .luna_chara {
  width: 1050px;
  padding-top: 656px;
  margin-left: -525px;
  left: 50%;
  top: 130px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_chara01.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 40;
  animation: slidein01 1s ease 1;
  -webkit-animation: slidein01 1s ease 1;
}

@keyframes slidein01 {
    0%   { opacity:0; transform:translateY(20px);}
    100% { opacity:1; transform:translateY(0px);}
}

@-webkit-keyframes slidein01 {
    0%   { opacity:0; -webkit-transform:translateY(20px);}
    100% { opacity:1; -webkit-transform:translateY(0px);}
}

div.box_01 .luna_5th {
  width: 452px;
  padding-top: 246px;
  margin-left: -226px;
  left: 50%;
  top: -10px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 50;
  animation: zoomin01 1s ease 1;
  -webkit-animation: zoomin01 1s ease 1;
}

@keyframes zoomin01 {
    0%,50%   { opacity:0; transform:scale(1.2,1.2);}
    75% { opacity:1; transform:scale(0.98,0.98);}
    80% { opacity:1; transform:scale(1.1,1.1);}
    95% { opacity:1; transform:scale(0.99,0.99);}
    100% { opacity:1; transform:scale(1,1);}
}

@-webkit-keyframes zoomin01 {
    0%,50%   { opacity:0; -webkit-transform:scale(1.2,1.2);}
    75% { opacity:1; -webkit-transform:scale(0.98,0.98);}
    80% { opacity:1; -webkit-transform:scale(1.1,1.1);}
    95% { opacity:1; -webkit-transform:scale(0.99,0.99);}
    100% { opacity:1; -webkit-transform:scale(1,1);}

}

div.box_01 .luna_5th:after {
  content:"";
  width: 452px;
  padding-top: 246px;
  top: -10px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_ef.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 20;
  animation: effect01 3s ease infinite;
  -webkit-animation: effect01 3s ease infinite;
}

div.box_01 .luna_5th:before {
  content:"";
  width: 452px;
  padding-top: 246px;
  top: -10px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_ef2.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 20;
  animation: effect02 3s ease infinite;
  -webkit-animation: effect02 3s ease infinite;
}

@keyframes effect01 {
    0% { opacity:1;}
    50% { opacity:0;}
    100% { opacity:1;}
}

@-webkit-keyframes effect01 {
    0% { opacity:1;}
    50% { opacity:0;}
    100% { opacity:1;}
}

@keyframes effect02 {
    0% { opacity:0;}
    50% { opacity:1;}
    100% { opacity:0;}
}

@-webkit-keyframes effect02 {
    0% { opacity:0;}
    50% { opacity:1;}
    100% { opacity:0;}
}

/* campaign */
div.box_01 .luna_campaign {
  width: 1070px;
  padding-top: 388px;
  margin-left: -545px;
  left: 50%;
  bottom: 20px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_campaign.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 50;
}

/* アンカーリンク */
div.box_01 .anchor_01 {
  width: 250px;
  padding-top: 58px;
  left: 50%;
  margin-left: -21%;
  bottom: 42px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_btn01.png) no-repeat 0px 0px;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 100;
}

div.box_01 .anchor_02 {
  width: 250px;
  padding-top: 58px;
  left: 50%;
  margin-left: -100px;
  bottom: 42px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_btn01.png) no-repeat 0px 0px;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 100;

}

div.box_01 .anchor_03 {
  width: 250px;
  padding-top: 58px;
  left: 50%;
  margin-left: 10.4%;
  bottom: 42px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_btn01.png) no-repeat 0px 0px;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 100;
}

div.box_01 .anchor_01:hover {
    opacity: 0.8;
    bottom: 41px;
}
div.box_01 .anchor_02:hover {
    opacity: 0.8;
    bottom: 41px;
}
div.box_01 .anchor_03:hover {
    opacity: 0.8;
    bottom: 41px;
}

/* luna_imgscroll */
div.box_01 .luna_imgscroll01 {
  cursor: pointer;
  width: 1070px;
  padding-top: 388px;
  margin-left: -545px;
  left: 50%;
  bottom: 20px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_campaign.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 1;
}

div.box_01 .luna_imgscroll02 {
  cursor: pointer;
  width: 1070px;
  padding-top: 388px;
  margin-left: -545px;
  left: 50%;
  bottom: 20px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_campaign.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 1;
}

div.box_01 .luna_imgscroll03 {
  cursor: pointer;
  width: 1070px;
  padding-top: 388px;
  margin-left: -545px;
  left: 50%;
  bottom: 20px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_campaign.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 1;
}

/* endpoint */
div.box_01.end p[class^="endpoint_0"] {
  width: 115px;
  padding-top: 140px;
  margin-left: -450px;
  left: 50%;
  bottom: 170px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_end01.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 50;
}

div.box_01.end p.endpoint_02 {
  margin-left: -140px;
}

div.box_01.saleend p.endpoint_02 {
  width: 115px;
  padding-top: 140px;
  margin-left: -140px;
  left: 50%;
  bottom: 170px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_end01.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 50;
}

/* BOX_02
-----------------------------------------------------*/
/* endpoint */
div.box_02.end .endpoint_01 {
  width: 115px;
  padding-top: 140px;
  margin-left: -420px;
  left: 50%;
  top: 110px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_end01.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 30;
}

/* endcover */
div.box_02.end .endcover {
  width: 946px;
  padding-top: 2276px;
  margin-left: -473px;
  left: 50%;
  top: 210px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_end02.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  display: none;
  height: 0;
  z-index: 20;
}



/* box_03
-----------------------------------------------------*/

/* endpoint */
div.box_03.end .endpoint_01 {
  width: 115px;
  padding-top: 140px;
  margin-left: -430px;
  left: 50%;
  top: 170px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_end01.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 30;
}


/* 過去作リストCSS上書き */
div#search_result_list {
  position: relative;
  left: 50%;
  margin-left: -460px;
  top: 300px;
  z-index: 20;
}

table.work_1col_table {
  position: absolute;
  table-layout: auto;
  width: 900px;
  background: #fff;
  border: solid 1px #392505;
  padding: 5px 10px;
}

div#search_result_list li.work_rankin td {
  border-bottom: none;
  padding: 0;
}

/* box_04
-----------------------------------------------------*/
div.box_04{ overflow:hidden;}

/* chobit動画位置調整 */
.movie {
  position: absolute;
  z-index: 40;
  bottom: 162px;
  left: 50%;
  margin-left: -482px;
}

.movie :hover {
    opacity: 0.9;
}

/* お気に入りボタン */
div.box_04 .favoritebtn {
  cursor: pointer;
  width: 308px;
  padding-top: 68px;
  left: 50%;
  margin-left: -24.5%;
  bottom: 38%;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_btn02.png) no-repeat 0px 0px;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 100;
}

div.box_04 .favoritebtn:hover { background-position: 0 -68px; }

div.box_04 .favoritebtn.fdone {
    background-position: 0 -136px;
}

/* キャラ */
div.box_04 .luna_chara02 {
  width: 586px;
  padding-top: 497px;
  left: 50%;
  margin-left: 116px;
  bottom: 0px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_chara02.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 30;
  animation: charaopacity2 6s ease infinite;
  -webkit-animation: charaopacity2 6s ease infinite;
}

@keyframes charaopacity2 {
    0%,40% { opacity:1;}
    50%,90% { opacity:0;}
    100% { opacity:1;}
}

@-webkit-keyframes charaopacity2 {
    0%,40% { opacity:1;}
    50%,90% { opacity:0;}
    100% { opacity:1;}
}

div.box_04 .luna_chara03 {
  width: 586px;
  padding-top: 497px;
  left: 50%;
  margin-left: 116px;
  bottom: 0px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_chara03.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 31;
  animation: charaopacity 6s ease infinite;
  -webkit-animation: charaopacity 6s ease infinite;
}

@keyframes charaopacity {
    0%,40% { opacity:0; transform:scale(1.2,1.2);}
    50%,90% { opacity:1; transform:scale(1,1);}
    100% { opacity:0; transform:scale(1.2,1.2);}
}

@-webkit-keyframes charaopacity {
    0%,40% { opacity:0; -webkit-transform:scale(1.2,1.2);}
    50%,90% { opacity:1; -webkit-transform:scale(1,1);}
    100% { opacity:0; -webkit-transform:scale(1.2,1.2);}
}

div.box_04 .luna_text {
  width: 586px;
  padding-top: 497px;
  left: 50%;
  margin-left: 116px;
  bottom: 0px;
  background: url(https://www.dlsite.com/images/promo/lunasoft_5th/lunasoft_5th_text_01.png) no-repeat 0 0;
  position: absolute;
  overflow: hidden;
  line-height: 200%;
  height: 0;
  z-index: 40;
}


/* クレジット
-----------------------------------------------------*/
#promo_footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #ccc;
  text-align: center;
  background: #000;
  position: absolute;
  bottom: 0px;
  z-index: 10;
}

/* コラボキャンペーン注意文言 */

div.box_02 div.collabo_attention {
  position: absolute;
  width: 800px;
  bottom: 60px;
  left: 50%;
  margin-left: -420px;
  color: #fff;
  font-size: 14px;
  border-radius: 10px;
  padding: 20px;
}
div.box_02 div.collabo_attention h2 {
  font-size: 17px;
  font-weight: bold;
}

div.box_02 div.collabo_attention li {
  color: rgba(244,255,3,1.00);
  list-style-type: disc;
  font-size: 16px;
}

div.box_02 div.collabo_attention ul {
    margin-top: 6px;
    margin-left: 20px;
}


/* topへ
-----------------------------------------------------*/
a.promo_return_top {
  display: block;
  position: fixed;
  width: 50px;
  height: 0;
  padding-top: 50px;
  line-height: 50px;
  overflow: hidden;
  right: 20px;
  bottom: 20px;
  background: url(https://www.dlsite.com/images/promo/other/icon_return_top.png) no-repeat 0 -50px;
  opacity: 0.5;
  z-index: 20;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a.promo_return_top:hover {
  margin-top: 1px;
  opacity: 1;
}

a.promo_return_top.hide {
  cursor: default;
  opacity: 0;
  bottom: 0;
}

a.promo_return_top.nonfixed {
  position: absolute;
}