@charset "UTF-8";

#top{
    background-color: #000;
    min-height: 700px;
}

#top a:hover{
    opacity: 0.7;
}

.mv{
    overflow: hidden;
    zoom: 1;
}

#top .contents{
    width: 1080px;
    height: 705px;
    margin: auto;
    position: relative;
}

nav{
    position: relative;
    float: left;
    top: 50%;
    -webkit-transform: translateY(-50%); /* Safari用 */
    transform: translateY(-50%);
}

#top nav{
    text-align: center;
    width: 288px;
}

#top nav li{
    margin-bottom: 15px;
}

#top nav li:last-child{
    margin-bottom: 0;
}


#top nav .sns-btn{
    text-align: center;
    width: 200px;
    margin: auto;
    margin-top: 15px;
    margin-left: 50px;
}
#top nav .sns-btn li{
    margin-bottom: 10px;
}

#top .bnr{
    position: absolute;
    right: 0;
    top:290px;
    z-index: 999;
}


#top .main-visual{
/*
    background-image: url('../img/top/gin.png');
    background-repeat: no-repeat;
    background-size: contain;
    */
    float: left;
    width: 792px;
    height: 705px;
}
#top .main-visual img{
    height: 705px;
}

#top .catch{
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    margin: auto;
    width: 940px;
}

#top .space{
    position: absolute;
    right: 0;
    left: 0;
    top:20px;
    margin: auto;
    width: 951px;
    text-align: right;
}

footer{
    width: 100%;
    height: 100px;
    min-width: 1080px;
    background-color:#cc0066;
    text-align: center;
    padding-top: 20px;
    margin-top: -21px;
}

footer ul{
    width: 602px;
    margin: auto;
    margin-top: 20px;
}

footer ul li{
    float:left;
    margin-right: 22px;
}


/*----------------------------
ウルトラティザー
----------------------------*/
/* - パターンA - */
.ptn-a .main {
  background: #000 url(../img/top-a/logo.png) center center no-repeat;
  position: relative;
}
.ptn-a .main-ttl {
  padding: 60px 0 50px;
  text-align: center;
}
.ptn-a .roadshow {
  padding: 20px 0 30px;
}
.ptn-a .billing01 {
  position: absolute;
  right: 30px;
  top: 70px;
}
.ptn-a .billing02 {
  position: absolute;
  left: 30px;
  bottom: 70px;
}

/* - パターンB - */
.ptn-b .main {
  background: #fff url(../img/top-b/logo.png) center center no-repeat;
}
.ptn-b .main-ttl {
  padding: 60px 0 50px;
}
.ptn-b .roadshow {
  padding: 20px 0 30px;
}
.ptn-b .billing01 {
  position: absolute;
  right: 30px;
  top: 70px;
}
.ptn-b .billing02 {
  position: absolute;
  left: 30px;
  bottom: 70px;
}

/* - パターンC - */
.ptn-c {
  background: url(../img/top-c/bg.jpg) center 0 repeat;
}
.ptn-c .main {
  background: url(../img/top-c/img-01.png) center 100px no-repeat;
  min-height: 800px;
}
.ptn-c .main-ttl, .ptn-c .billing01, .ptn-c .billing02, .ptn-c .logo_wb {
  display: none;
}

/* - パターンD - */
.ptn-d {
  background: #000 url(../img/top-d/bg.jpg) center bottom no-repeat;
}
.ptn-d .main-ttl {
  text-align: center;
}
.ptn-d .billing01, .ptn-d .billing02, .ptn-d .logo_wb {
  display: none;
}

/* - パターンE - */
.ptn-e {
  background: #000;
}
.ptn-e .main-ttl {
  text-align: center;
}
.ptn-e .billing01, .ptn-e .billing02 {
  display: none;
}

@media screen and (max-height: 768px) {
  .ptn-e .main {
    background-size: auto 95%;
  }
}
/* - パターンF - */
.ptn-f {
  background: #000;
}
.ptn-f .main-ttl {
  text-align: center;
}
.ptn-f .billing01, .ptn-f .billing02 {
  display: none;
}

@media screen and (max-height: 768px) {
  .ptn-f .main {
    background-size: auto 95%;
  }
}
/* - パターンG - */
.ptn-g {
  background: #000;
}
.ptn-g .main-ttl {
  text-align: center;
}
.ptn-g .billing01, .ptn-g .billing02 {
  display: none;
}
.ptn-g .kanban {
  position: fixed;
  bottom: 0;
  right: 30px;
}

@media screen and (max-height: 768px) {
  .ptn-g .main {
    background-size: auto 95%;
  }
}
/* - 確認時 制御 - */
.ptn-a, .ptn-b, .ptn-c, .ptn-d, .ptn-e, .ptn-f, .ptn-g {
  display: none;
}


/*----------------------------
コメント
----------------------------*/
#comment {
    background: #000;
    font-family: Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    overflow: hidden;
    /*見出し*/
    /*写真の並び*/
    /*footer*/
}
#comment h2 {
    text-align: center;
    padding-top: 70px;
    padding-bottom: 75px;
}
#comment h3 {
    margin-bottom: 30px;
}


#comment h4 {
    color: #e60012;
    text-align: center;
    background: #000 url(../img/comment/bg_bdr.png) center 0.6em no-repeat;
    font-size: 16px;
    margin-bottom: 10px;
}


#comment .comment-list {
    width: 1000px;
    margin: 0 auto;
}
#comment .photo-list .cast li,
#comment .photo-list .staff li {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
    /* 相対位置指定 */
    margin-bottom: 20px;
    margin-right: 20px;
    float: left;
}
#comment .photo-list .cast li:nth-child(3n),
#comment .photo-list .staff li:nth-child(3n) {
    margin-right: 0;
}
#comment .photo-list .cast li .caption,
#comment .photo-list .staff li .caption {
    height: 150px;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-align: center;
    color: #fff;
    position: relative;
    background: url(../img/comment/obj01.png) center center no-repeat;
}
#comment .photo-list .cast li .caption .act-name,
#comment .photo-list .staff li .caption .act-name {
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
#comment .photo-list .cast li .caption .act-name:first-letter,
#comment .photo-list .staff li .caption .act-name:first-letter {
    color: #e60012;
}
#comment .photo-list .cast li .caption .chara-name,
#comment .photo-list .staff li .caption .chara-name {
    padding: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}
#comment .photo-list .cast li .mask,
#comment .photo-list .staff li .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    /* 絶対位置指定 */
    top: 0;
    left: 0;
    opacity: 0;
    /* マスクを非表示 */
    background-color: rgba(0, 0, 0, 0.4);
    /* 半透明化 */
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#comment .photo-list .cast li:hover .mask,
#comment .photo-list .staff li:hover .mask {
    opacity: 1;
    /* マスクを表示 */
}
#comment .photo-list {
    width: 100%;
}
#comment .cast {
    width: 490px;
    float: left;
}
#comment .staff {
    width: 340px;
    float: left;
    padding-left: 60px;
}
#comment .sentence-sec {
    border-top: 1px solid #464646;
    padding-top: 60px;
    margin-top: 40px;
    line-height: 1.8;
    /*コメント横写真*/
}
#comment .sentence-sec li {
    padding-left: 280px;
    min-height: 250px;
    margin-bottom: 70px;
}
#comment .sentence-sec dt {
    border-bottom: 1px dotted #464646;
    padding-bottom: 17px;
    margin-bottom: 20px;
    letter-spacing: 0.3em;
}
#comment .sentence-sec dd {
    color: #fff;
    font-size: 14px;
}
#comment .sentence-sec dt {
    line-height: 1;
}
#comment .sentence-sec dt .chara-name {
    color: #cccccc;
    padding-right: 8px;
    font-size: 18px;
}
#comment .sentence-sec dt .chara-name span {
    font-size: 12px;
}
#comment .sentence-sec dt .act-name {
    color: #fff;
    font-size: 28px;
    display: block;
    display: inline-block;
}
#comment .sentence-sec dt .act-name:first-letter {
    color: #e60012 !important;
}
#comment .sentence-sec li#c01 {
    background: url(../img/comment/img-c01.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c02 {
    background: url(../img/comment/img-c02.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c03 {
    background: url(../img/comment/img-c03.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c04 {
    background: url(../img/comment/img-c04.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c05 {
    background: url(../img/comment/img-c05.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c06 {
    background: url(../img/comment/img-c06.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c07 {
    background: url(../img/comment/img-c07.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c08 {
    background: url(../img/comment/img-c08.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c09 {
    background: url(../img/comment/img-c09.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c10 {
    background: url(../img/comment/img-c10.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c11 {
    background: url(../img/comment/img-c11.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c12 {
    background: url(../img/comment/img-c12.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c13 {
    background: url(../img/comment/img-c13.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c14 {
    background: url(../img/comment/img-c14.png) 0 0 no-repeat;
}
#comment .sentence-sec li#c15 {
    background: url(../img/comment/img-c15.png) 0 0 no-repeat;
}
#comment .sentence-sec li#s01 {
    background: url(../img/comment/img-s01.png) 0 0 no-repeat;
}
#comment .sentence-sec li#s02 {
    background: url(../img/comment/img-s02.png) 0 0 no-repeat;
}
#comment .pagetop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}
#comment footer {
    background: #464646;
    padding: 15px 0;
    color: #fff;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0.1em;
    position: relative;
    bottom: -20px;
}

iframe {
    height: 0;
}

#comment header ul li{
    float:left;
}


/*----------------------------
キャラクター
----------------------------*/

#character .chara_wrapepr .chara-list {
    display: inline-block;
    margin: 0;
}