@charset "UTF-8";
/*-------------------------------
共通設定
--------------------------------*/
[class$="_frm"] {
   width: 970px;
   margin: 0 auto;
}
article.contents {
   width: 970px;
   height: auto;
   margin: 0 auto 100px;
   padding-bottom: 40px;
}
.sp article.contents {
   width: 100%;
   height: auto;
   margin: 0 auto 100px;
   padding-bottom: 40px;
}
#jfm000021 .container {
   background: url(/static/cpn/jfm000021/img/bg.jpg) repeat;
   color: #636363;
}
.sp#jfm000021 .container {
   width: 100%;
   margin: 0 auto;
}

#globalNavi.naviFixed {
   display: none;
}
#jfm000021 .container a:hover {
   opacity: .6;
   text-decoration: none;
   cursor: pointer;
   -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
           transition: all .2s ease-in-out;
}
div.top {
   position: fixed;
   right: 10px;
   bottom: 100px;
   margin: -3em 0 1em 0;
   text-align: right;
}
/* 画像が暗いので弱めに個別調整 */
#jfm000021 .snapshot .control {
   opacity: .3;
}
#jfm000021 .snapshot .control:hover {
   opacity: 1;
}
.into_copyright {
   width: 970px;
   margin: 0 auto;
   margin-bottom: 5px;
   text-align: right;
}
/*----------------------------------------------
section #hederG
----------------------------------------------*/
section.headInfo {
   background: url(/static/cpn/jfm000021/img/headerMain.jpg) no-repeat 0 0;
}
h1.headTtl {
   overflow: hidden;
   height: 480px;
   background: url(/static/cpn/jfm000021/img/logo.png) no-repeat 0 0;
   text-indent: 100%;
   white-space: nowrap;
}

/*-----------.glovalNavi-----------------------------------*/

.glovalNavi ul {
   width: 970px;
   margin: 0 auto;
   letter-spacing: -.4em;
}
.glovalNavi ul li {
   display: inline-block;
}
.glovalNavi ul li a {
   display: block;
   overflow: hidden;
   width: 287px;
   height: 108px;
   background: url(/static/cpn/jfm000021/img/nav_1.jpg) no-repeat center 0;
   text-indent: 100%;
   white-space: nowrap;
}
.glovalNavi ul li:nth-of-type(2) a {
   width: 393px;
   background: url(/static/cpn/jfm000021/img/nav_2.jpg) no-repeat center 0;
}
.glovalNavi ul li:nth-of-type(3) a {
   width: 289px;
   background: url(/static/cpn/jfm000021/img/nav_3.jpg) no-repeat center 0;
}
.glovalNavi ul li a {
   display: block;
}


.glovalNavi ul li a {
   display: block;
}
/*-----------.headInfo-----------------------------------*/
.buy a {
   display: inline-block;
   overflow: hidden;
   position: relative;
   width: 501px;
   height: 113px;
   margin-right: 24px;
   background: url(/static/cpn/jfm000021/img/buy.jpg) no-repeat center 0;
   text-indent: 100%;
   white-space: nowrap;
}

h3.buy.detail a {
    background: url(/static/cpn/jfm000021/img/detailBtn.jpg) no-repeat center 0;
    margin: 2% auto;
    height: 91px;
}

.buy {
   margin-bottom: 55px;
   text-align: right;
}
h3.buy.detail {
    text-align: center;
    margin-bottom: 0;
}
/*-----------.trailer-----------------------------------*/
[class$="_frm"] h1,
[class$="_frm"] h2 {
   overflow: hidden;
   height: 94px;
   margin-bottom: 113px;
   background: url(/static/cpn/jfm000021/img/obi_trailer.png) no-repeat center 0;
   text-indent: 100%;
   white-space: nowrap;
}
section.trailer {
   padding-bottom: 50px;
   background: url(/static/cpn/jfm000021/img/trailerBg.jpg) no-repeat center 0;
}
.trailermovie.video.h360 {
   width: 787px;
   margin: 0 auto;
}
/*-----------.intro-----------------------------------*/
section.intro_frm {
   background: url(/static/cpn/jfm000021/img/intoro.jpg) no-repeat center 0;
}
section.intro_frm h1 {
   height: 198px;
   background: url(/static/cpn/jfm000021/img/obi_intoro.png) no-repeat center 0;
}
section.intro_frm h2 {
   height: 55px;
   margin-bottom: 0;
   background: url(/static/cpn/jfm000021/img/story.png) no-repeat 20px 0;
}
section.intro_frm h2.introduction {
   margin: 222px 0 0 0;
   background: url(/static/cpn/jfm000021/img/intoro.png) no-repeat 20px 0;
}
.movieTxt {
   margin-bottom: 30px;
   padding: 20px;
   background: rgba(0,0,0,.5);
   color: #fff;
   font-size: 16px;
   line-height: 1.6;
}

p.storyDetail_1 {
   padding: 0 20px 20px;
   font-size: 16px;
   line-height: 1.6;
}

section.chara_frm h1 {
   background: url(/static/cpn/jfm000021/img/obi_related.png) no-repeat 0 0;
}

section#relaterd_work h1 {
   overflow: hidden;
   height: 94px;
   background: url(/static/cpn/jfm000021/img/obi_related.png) no-repeat center 0;
   text-indent: 100%;
   white-space: nowrap;
}
section#relaterd_work h2 {
   display: inline-block;
   width: 288px;
   text-align: right;
}

.info_anime {
   display: inline-block;
   width: 670px;
   text-align: center;
   vertical-align: top;
}
.info_anime h3 {
   color: #ff6193;
   font-size: 60px;
}

h4 {
   width: 95%;
   margin: 0 auto;
   background: #ff6193;
   color: #fff;
   font-size: 26px;
   line-height: 1.75;
}

.info_anime p {
   width: 92%;
   margin: 2% auto;
   font-size: 24px;
   text-align: left;
   line-height: 1.5;
}

section#relaterd_work {
   background: #fff;
}
div.top {
    position: fixed;
    right: 15px;
    bottom: 150px;
    text-align: right;
}






/*--------------------------------------------------------------
     SP
---------------------------------------------------------------*/

   .sp article.contents img {
      width: 100%;
   }
   .sp [class$="_frm"] {
      width: 100%;
      margin: 0 auto;
   }
  /*----------------------------------------------
section #hederG
----------------------------------------------*/
.sp section.headInfo {
   background: url(/static/cpn/jfm000021/img/headerMain.jpg) no-repeat 0 0;
   background-size:contain;
   min-height: 62vw;
}
.sp h1.headTtl {
   overflow: hidden;
   height: 12vw;
   background: url(/static/cpn/jfm000021/img/logo.png) no-repeat 0 0;
   background-size:contain;
   text-indent: 100%;
   white-space: nowrap;
   margin-bottom: 52vw;
}
/*-----------.glovalNavi-----------------------------------*/

.sp .glovalNavi ul {
   width: 97%;
   margin: 0 auto;
   letter-spacing: -.4em;
}
.sp .glovalNavi ul li {
   display: inline-block;
}
.sp .glovalNavi ul li a {
   display: block;
   overflow: hidden;
   width: 28%;
   height: 10vw;
   background: url(/static/cpn/jfm000021/img/nav_1.jpg) no-repeat center 0;
   background-size:contain;
   text-indent: 100%;
   white-space: nowrap;
}
.sp .glovalNavi ul li:nth-of-type(2) a {
   width: 39%;
   background: url(/static/cpn/jfm000021/img/nav_2.jpg) no-repeat center 0;
   background-size:contain;
}
.sp .glovalNavi ul li:nth-of-type(3) a {
   width: 28%;
   background: url(/static/cpn/jfm000021/img/nav_3.jpg) no-repeat center 0;
   background-size:contain;
}
.sp .glovalNavi ul li a {
   display: block;
}

.sp .glovalNavi ul li a {
   display: block;
}
/*-----------.headInfo-----------------------------------*/
.sp .buy a {
   display: inline-block;
   overflow: hidden;
   position: relative;
   width: 100%;
   height: 14vw;
   margin-right: 2vw;
   background: url(/static/cpn/jfm000021/img/buyBtn.jpg) no-repeat center 0;
   background-size:contain;
   text-indent: 100%;
   white-space: nowrap;
}
.sp h3.buy.detail a{
    
background: url(/static/cpn/jfm000021/img/detailBtn.jpg) no-repeat center 0;
    
background-size: contain;
    
height: 14vw;
}
.sp .buy {
   margin-bottom: 5vw;
   text-align: right;
}
/*-----------.trailer-----------------------------------*/
.sp [class$="_frm"] h1,
.sp [class$="_frm"] h2 {
   overflow: hidden;
   height: 10vw;
   margin-bottom: 11%;
   background: url(/static/cpn/jfm000021/img/obi_trailer.png) no-repeat 0 0;
   background-size:contain;
   text-indent: 100%;
   white-space: nowrap;
}
.sp section.trailer {
   padding-bottom: 5%;
   background: url(/static/cpn/jfm000021/img/trailerBg.jpg) no-repeat center 0;
   background-size:contain;
}
.sp .trailermovie.video.h360 {
   width: 78vw;
   margin: 0 auto;
}
/*-----------.intro-----------------------------------*/
.sp section.intro_frm {
   background: url(/static/cpn/jfm000021/img/intoro.jpg) no-repeat center 0;
   background-size:contain;
}
.sp section.intro_frm h1 {
   height: 19vw;
   background: url(/static/cpn/jfm000021/img/obi_intoro.png) no-repeat center 0;
   background-size:contain;
   margin-bottom: 47vw;
}
.sp section.intro_frm h2 {
   height: 5vw;
   margin-bottom: 0;
   background: url(/static/cpn/jfm000021/img/story.png) no-repeat 2% 0;
   background-size:contain;
}
.sp section.intro_frm h2.introduction {
   margin: 2vw 0 0 0;
   background: url(/static/cpn/jfm000021/img/intoro.png) no-repeat 2% 0;
   background-size:contain;
}
.sp .movieTxt {
   margin-bottom: 3%;
   padding: 2%;
   background: rgba(0, 0, 0, 0.86);
   color: #fff;
   font-size: 90%;
   line-height: 1.6;
}
.sp p.storyDetail_1 {
   padding: 0 2% 2%;
   font-size: 90%;
   line-height: 1.6;
}
.sp section.chara_frm h1 {
   background: url(/static/cpn/jfm000021/img/obi_related.png) no-repeat 0 0;
   background-size:contain;
}
.sp section#relaterd_work h1 {
   overflow: hidden;
   height: 11vw;
   background: url(/static/cpn/jfm000021/img/obi_related.png) no-repeat 0 0;
   background-size:contain;
   text-indent: 100%;
   white-space: nowrap;
}
.sp section#relaterd_work h2 {
   display: inline-block;
   width: 30%;
   text-align: right;
   padding-left: 1%;
}
.sp .info_anime {
   display: inline-block;
   width: 67%;
   text-align: center;
   vertical-align: top;
}
.sp .info_anime h3 {
   color: #ff6193;
   font-size: 6%;
}
.sp h4 {
   width: 95%;
   margin: 0 auto;
   background: #ff6193;
   color: #fff;
   font-size: 120%;
   line-height: 1.75;
}
.sp .info_anime p {
   width: 92%;
   margin: 2% auto;
   font-size: 110%;
   text-align: left;
   line-height: 1.5;
}
.sp section#relaterd_work {
   background: #fff;
}

/*============================================================
player fit
============================================================*/
.fitWindows header {
   display: none;
}
.fitWindows #globalNavi {
   display: none;
}
.fitWindows #headerUtility {
   display: none;
}
.fitWindows footer {
   display: none;
}
.fitWindows article.contents section {
   display: none;
   margin: 0;
}
.fitWindows article.contents section div#movieInfo .trailTTL {
   display: none;
   margin: 0;
}
.fitWindows article.contents section.trailer {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
}
.fitWindows article.contents section.trailer h2,
.fitWindows div.container section.trailer div.txt,
.fitWindows div.container section.trailer div.notice {
   display: none !important;
}
.fitWindows article.contents section.trailer {
   margin: 0;
   padding: 0;
   background: none;
}
.fitWindows article.contents section.trailer div.trailermovie,
.fitWindows article.contents section.trailer li.player {
   display: block;
}
.fitWindows article.contents section.trailer div.trailermovie,
.fitWindows article.contents section.trailer li.player,
.fitWindows article.contents section.trailer div#silverlightControlHost {
   display: block;
   overflow: hidden;
   width: 100%;
   height: auto;
}
.fitWindows .container div#movieInfo {
   display: block;
   width: 100%;
}
.fitWindows #Rak_Showtime_Top_FBanner {
   display: none;
}

/* cpnInfo
------------------------------------------------------------*/
.cpnInfo {
   width: 970px;
   margin: 0 auto 20px;
}.cpnInfo .header {
   margin-bottom: 1em;
}.cpnInfo .header img {
   width: 100%;
}.cpnInfo div.img {
   max-width: 970px;
   width: 100%;
   margin: 0 auto;
}.cpnInfo div.img div {
   background: #edecec;
}.cpnInfo div.img div a {
   display: block;
   max-width: 790px;
   width: 80%;
   margin: 0 auto 2em;
}.cpnInfo div.img img {
   width: 100%;
   margin-bottom: 1em;
}.cpnInfo table {
   max-width: 970px;
   width: 100%;
   margin: 0 auto;
}.cpnInfo th {
   width: 20%;
   background: #eee;
}.cpnInfo .title {
   padding: 10px 0 7px;
   background: #c01920;
   color: #fff;
   font-size: 130%;
   text-align: center;
}.cpnInfo td {
   width: 80%;
}.cpnInfo table,
.cpnInfo td,
.cpnInfo th {
   padding: 15px;
   border: 1px solid #ccc;
   text-align: left;
   vertical-align: middle;
   line-height: 1.5;
}.cpnInfo table strong,
.cpnInfo td strong,
.cpnInfo th strong {
   display: block;
}.cpnInfo table p,
.cpnInfo td p,
.cpnInfo th p {
   margin-bottom: 1em;
}@media screen and (max-width:641px) {
   .cpnInfo {
      width: 100%;
   }
   .cpnInfo table,
   .cpnInfo td,
   .cpnInfo th {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      width: 94%;
      padding: 5px;
      border: none;
   }.cpnInfo td,
   .cpnInfo th {
      display: block;
      width: 100%;
   }.cpnInfo td {
      margin-bottom: 1em;
   }.cpnInfo .title {
      margin: 0 auto 2%;
      font-size: 100%;
   }
   #jfm000021 .container * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
   }
}