@charset "UTF-8";
/*-------------------------------
共通設定
--------------------------------*/
#ffm000018 .container {
   width: 100%;
   margin: 0 auto 100px;
   background-color: #020d23;
   color: #fff;
}
.sp#ffm000018 .container {
   width: 100%;
   margin: 0 auto;
   font-family: "Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
}
.contents {
   width: 100%;
   margin: 0 auto;
}
.sp .contents {
   width: 100%;
   margin: 0;
}
#globalNavi.naviFixed {
   display: none;
}
.container a:hover {
   opacity: .6;
   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: 25px;
   bottom: 150px;
   /* margin: -3em 0 1em 0; */
   text-align: right;
}
/* 画像が暗いので弱めに個別調整*/
#ffm000018 .snapshot .control {
   opacity: .3;
}
#ffm000018 .snapshot .control:hover {
   opacity: 1;
}
/*----------------------------------------------
pc
----------------------------------------------*/
.ttlBox {
   width: 970px;
   height: 490px;
   margin: 0 auto;
   background: url(/static/cpn/ffm000018/img/headrMain.jpg) no-repeat 30px;
}
article.contents .ttlBox h1,
article.contents .ttlBox h2,
article.contents .ttlBox h3 {
   overflow: hidden;
   width: 390px;
   height: 122px;
   padding-top: 55px;
   background: url(/static/cpn/ffm000018/img/logoTtl.png) no-repeat 0 bottom;
   text-indent: 100%;
   white-space: nowrap;
}
article.contents .ttlBox h1 {
   width: 501px;
   height: 38px;
   padding: 45px 0 0;
   background: url(/static/cpn/ffm000018/img/mainTtl.png) no-repeat 0 bottom;
}
article.contents .ttlBox h3 {
   width: 501px;
   height: 38px;
   padding: 38px 0 0;
   background: url(/static/cpn/ffm000018/img/mainttlTxt.png) no-repeat 0 bottom;
}
.buyNow {
   margin-top: 25px;
}
/*----------------------------------------------
section #hederG
----------------------------------------------*/
section#hederG {
   position: relative;
   margin-bottom: 40px;
   padding-top: 58px;
   letter-spacing: -.4em;
}
section#hederG figcaption {
   overflow: hidden;
   height: 56px;
   /* background: url(/static/cpn/ffm000018/img/mainImageTtl.jpg) no-repeat; */
   font-size: 29px;
   text-indent: 100%;
   white-space: nowrap;
}
#hederG h1 {
   display: inline-block;
   margin-bottom: 12px;
   padding-top: 16px;
   letter-spacing: 0;
}
section#hederG figure {
   display: inline-block;
   width: 562px;
   letter-spacing: 0;
}

.ttl {
   display: inline-block;
   width: 408px;
   text-align: center;
   vertical-align: top;
   letter-spacing: 0;
}

.ttl h2 {
   overflow: hidden;
   position: absolute;
   top: 30px;
   left: 18px;
   width: 935px;
   height: 30px;
   /* background: url(/static/cpn/ffm000018/img/hederTtl.png) no-repeat; */
   font-size: 29px;
   text-indent: 100%;
   white-space: nowrap;
}
.ttl h3 {
   overflow: hidden;
   margin-bottom: 6px;
   /* background: url(/static/cpn/ffm000018/img/start.png) no-repeat center; */
   font-size: 50px;
   text-indent: 100%;
   text-align: center;
   white-space: nowrap;
}
#hederG .buyNow {
   display: inline-block;
   width: 390px;
   text-align: center;
   vertical-align: top;
   letter-spacing: 0;
}
#hederG .buyNow img {
   width: 357px;
   height: auto;
   margin-top: -1%;
}
#hederG .buyNow p.buy img {
   margin: 2% 0;
}
/*----------------------------------------------
section #present
----------------------------------------------*/

.presentBox {
   width: 970px;
   margin: 0 auto;
   padding-bottom: 40px;
   color: #333;
   text-align: center;
}
section#present .presentTtl {
   height: 106px;
   background: #fff url(/static/cpn/ffm000018/img/limited.png) no-repeat center;
   color: #f1f2bc;
   font-size: 50px;
   font-weight: bold;
   padding: 0;
}
#present .presenttxt {
   overflow: hidden;
   width: 925px;
   height: 99px;
   margin: 0 auto 0;
   margin-bottom: 20px;
   background: url(/static/cpn/ffm000018/img/preTtl.png) no-repeat center;
   color: #f1f2bc;
   font-size: 26px;
   text-indent: 100%;
   line-height: 1;
   white-space: nowrap;
}
h3.presentDetails {
   margin-bottom: 25px;
   color: #020d23;
   font-size: 20px;
   font-weight: normal;
   text-align: center;
   line-height: 1.25;
   letter-spacing: -1px;
}

.present {
   display: -webkit-box;
   display:         flex;
   display: -webkit-flex;
   margin-bottom: 35px;

   -webkit-box-pack: justify;
           justify-content: space-around;
   -webkit-justify-content: space-around;
}
.present figure span {
   position: absolute;
   top: 10px;
   left: 10px;
}

.present figure img {
   vertical-align: bottom;
}

.present figcaption {
   padding: 10px 0 0 0;
   font-size: 14px;
   font-weight: bold;
}

.present figure.note,
.present figure.memo {
   height: 207px;
   padding-top: 113px;
}
.present figure {
   display: inline-block;
   position: relative;
   width: 270px;
   height: 307px;
   margin-right: 5px;
   padding-top: 13px;
   background-color: #fff;
   color: #555;

   -webkit-box-flex: 0
   flex: auto;
   -webkit-flex: inherit;
}


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

div.glovalNavi {
   width: 970px;
   margin: 7px auto 40px;
}

div.glovalNavi ul {
   display: -webkit-box;
   display:         flex;
   display: -webkit-flex;
   width: 970px;
   background: url(/static/cpn/ffm000018/img/bg_btn.jpg) repeat;
   text-align: center;
   letter-spacing: 0;

   -webkit-box-pack: justify;
           justify-content: center;
   -webkit-justify-content: center;
   /* padding: 0 20px; */
}
div.glovalNavi ul li {
   display: inline-block;
   width: 157px;
   height: 50px;
   border-right: 2px solid #1f303a;
   box-shadow: 0 0 1px #a5b6c0;
   color: #fff;
   font-size: 30px;
   text-align: center;

   -webkit-box-flex: 1;
           flex: auto;
   -webkit-flex: auto;
}
div.glovalNavi ul li a {
   display: inline-block;
   display: inline-block;
   overflow: hidden;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   width: 100%;
   color: #fff;
   text-decoration: none;
   text-indent: 100%;
   line-height: 50px;
   white-space: nowrap;
}
li.btn_1 a {
   background: url(/static/cpn/ffm000018/img/btn_1.png) no-repeat bottom;
}
li.btn_2 a {
   background: url(/static/cpn/ffm000018/img/btn_2.png) no-repeat bottom;
}
li.btn_3 a {
   background: url(/static/cpn/ffm000018/img/btn_3.png) no-repeat bottom;
}
li.btn_4 a {
   background: url(/static/cpn/ffm000018/img/btn_4.png) no-repeat bottom;
}
li.btn_5 a {
   background: url(/static/cpn/ffm000018/img/btn_6.png) no-repeat bottom;
}
div.glovalNavi ul li.last a {
   border-right: none;
   background: url(/static/cpn/ffm000018/img/btn_5.png) no-repeat bottom;
}
div.glovalNavi ul li:first-child {
   /* border-left: 2px solid #1f303a; */
}
div.glovalNavi ul li:farst-child {
   border-right: none;
   box-shadow: 0 0 0 #a5b6c0;
}
/*----------------------------------------------
trailer_box
----------------------------------------------*/
.trailer_box:after {
   display: block;
   clear: both;
   content: "";
}
div#movieInfo h2,
section#introduction h2,
section#story h2 {
   overflow: hidden;
   margin: 30px auto;
   padding-bottom: 5px;
   background: url(/static/cpn/ffm000018/img/trailTtl.png) no-repeat center;
   font-size: 36px;
   font-weight: normal;
   text-indent: 100%;
   text-align: center;
   line-height: 1.3;
   white-space: nowrap;
}
section#story h2 {
   font-size: 30px;
}

.trailer_box .trailermovie {
   width: 640px;
   margin: 10px auto 20px;
}
.tralerBox .prevew {
   margin: 0 auto;
   text-align: center;
}
.tralerBox .prevew li {
   display: inline-block;
   position: relative;
   width: 224px;
   margin: 0 0 1em 0;
   text-align: center;
   vertical-align: top;
}
.tralerBox .prevew li a:after {
   display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(/static/cpn/ffm000018/img/prev.png) no-repeat center 35%;
   background-size: 45px;
   content: "";
}
.tralerBox .prevew p.movieTtl {
   display: block;
   padding-top: 15px;
   text-align: center;
}
.tralerBox .prevew a {
   display: block;
}
.tralerBox .prevew li img {
   width: 100%;
   height: auto;
   background-color: #052338;
}
.trailer_box img {
   width: 640px;
   vertical-align: bottom;
}
/*----------------------------------------------
section #movieInfo
----------------------------------------------*/
div#movieInfo {
   background: url(/static/cpn/ffm000018/img/bg_dotts.jpg);
   text-align: center;
}
div#movieInfo .trailTTL,
section#introduction,
section#story {
   padding: 30px 0 0;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(.50, #fefffe), color-stop(.00, #eef0f3));
   background: -webkit-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
   background:    -moz-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
   background:      -o-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
   background:     -ms-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
   background:         linear-gradient(to bottom, #eef0f3 0%, #fefffe 50%, #fff 100%);
}
div#movieInfo .tralerAria {
   margin-bottom: 14px;
   padding: 20px 0;
}
section#introduction {
   margin-bottom: 30px;
}
section#introduction h2 {
   height: 83px;
   background: url(/static/cpn/ffm000018/img/intoroTtl.png) no-repeat center;
}
div#movieInfo h1,
section#introduction h1,
section#story h1,
section#character h1,
section#hitWork h1,
#present .presentTtl {
   overflow: hidden;
   width: 930px;
   height: 55px;
   margin: 0 auto;
   background-color: #002d50;
   color: #fff;
   font-size: 36px;
   text-indent: 100%;
   text-align: center;
   white-space: nowrap;
}

div#movieInfo h1 {
   background: #002d50 url(/static/cpn/ffm000018/img/obi_trailer.png) no-repeat;
}
section#introduction h1 {
   background: #002d50 url(/static/cpn/ffm000018/img/obi_intro.png) no-repeat;
}
section#story h1 {
   margin-bottom: 30px;
   background: #002d50 url(/static/cpn/ffm000018/img/obi_story.png) no-repeat;
}



div#movieInfo:target h1,
section#introduction:target h1,
section#story:target h1 {
   color: #f2e284;
   -webkit-transition: all .3s;
      -moz-transition: all  .3s;
        -o-transition: all  .3s;
           transition: all .3s;
}

div#movieInfo h2 {
   font-weight: normal;
}
#introduction p.movieIntro_2,
#introduction p.movieIntro_3,
#introduction p.movieIntro_4,
#story p.storyDetail,
section#story p {
   width: 830px;
   margin: 0 auto 20px;
   line-height: 1.4;
}
section#introduction h2 small {
   font-size: 12px;
}

section#introduction h2 span {
   display: block;
}
#introduction p.movieIntro {
   width: 830px;
   margin: 0 auto 25px;
   text-indent: 1em;
}
#introduction p,
section#story p {
   font-size: 14px;
   line-height: 1.4;
   letter-spacing: 1px;
}
#introduction .movieCap,
section#story .movieCap {
   padding: 25px 0 45px;
   background: url(/static/cpn/ffm000018/img/bg_dotts.jpg);
   text-align: center;
}
section#story {
   margin-bottom: 60px;
}
div#movieInfo .trailTTL,
section#introduction,
section#story {
   width: 970px;
   margin: 0 auto;
   padding: 0;
   background: none;
}
/*----------------------------------------------
section#hitWork
----------------------------------------------*/
section#hitWork {
   width: 970px;
   margin: 0 auto;
}
section#hitWork .works,
section#present .product {
   display: -webkit-box;
   display:         flex;
   display: -webkit-flex;
   text-align: center;

   -webkit-box-pack: justify;
           justify-content: space-around;
   -webkit-justify-content: space-around;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
}
section#present .product figure {
   display: inline-block;
   width: 280px;
   margin-bottom: 55px;
   color: #000;
   font-size: 25px;
   line-height: 30px;
}
section#present .product figure.note {
   width: 380px;
}
section#hitWork .works dt img {
   width: 250px;
}

section#hitWork .works dl {
   display: inline-block;
   width: 30%;
}
.into_copyright {
   padding: 82px 70px 10px 0;
   background: url(/static/cpn/ffm000018/img/heal.png) no-repeat right bottom ;
   text-align: right;
}
section#present .product figure span {
   display: block;
}
/*----------------------------------------------
section#character
----------------------------------------------*/
section#character {
   width: 970px;
   margin: 0 auto;
   padding: 0 20px;
}

section#character h1 {
   margin-bottom: 30px;
   background: #002d50 url(/static/cpn/ffm000018/img/obi_chara.png) no-repeat;
}
section#character ul li.cap {
   display: inline-block;
   overflow: hidden;
   width: 575px;
   margin-left: 20px;
   font-size: 50px;
   font-weight: normal;
   text-indent: 100%;
   vertical-align: top;
   white-space: nowrap;
}

section#character ul li img {
   width: 320px;
}
section#character ul li h2,
section#character ul li h3,
section#character ul li h4 {
   font-size: 100%;
   font-weight: normal;
}

section#character ul {
   width: 930px;
   height: 215px;
   margin-bottom: 15px;
   padding-bottom: 10px;
   border-bottom: 3px dotted #9d9fa3;
}
section#character ul.chara5 {
   border: none;
}
section#character ul li {
   display: inline-block;
   width: 328px;
}
ul.chara1 li.cap {
   height: 160px;
   background: url(/static/cpn/ffm000018/img/chara_txt1.png) no-repeat;
}
ul.chara2 li.cap {
   height: 203px;
   background: url(/static/cpn/ffm000018/img/chara_txt2.png) no-repeat;
}
ul.chara3 li.cap {
   height: 188px;
   background: url(/static/cpn/ffm000018/img/chara_txt3.png) no-repeat;
}
ul.chara4 li.cap {
   height: 160px;
   background: url(/static/cpn/ffm000018/img/chara_txt4.png) no-repeat 0 0;
}
ul.chara5 li.cap {
   height: 229px;
   background: url(/static/cpn/ffm000018/img/chara_txt5.png) no-repeat;
}
/*--------------------------------------------------------------
   section#hitWork
---------------------------------------------------------------*/


section#hitWork h1 {
   height: 55px;
   margin-bottom: 20px;
   background: #002d50 url(/static/cpn/ffm000018/img/obi_kanren.png) no-repeat;
}
section#hitWork h2 {
   overflow: hidden;
   margin-bottom: 40px;
   background: url(/static/cpn/ffm000018/img/kanren.png) no-repeat center;
   font-size: 36px;
   text-indent: 100%;
   text-align: center;
   white-space: nowrap;
}
section#hitWork .works dl a {
   color: #fff;
}

section#hitWork .works dd h3 {
   margin-bottom: 15px;
   font-size: 14px;
   font-weight: normal;
   line-height: 30px;
}
/*--------------------------------------------------------------
    section#present
---------------------------------------------------------------*/
section#present {
   padding-top: 35px;
   background-color: #fff;
}

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

.sp .contents img {
   max-width: 100%;
}
@media screen and (max-width:641px) {
   .ttlBox {
      width: 94%;
      height: auto;
      margin: 0 auto 3%;
      padding-left: 5%;
      background: url(/static/cpn/ffm000018/img/headrMain.jpg) no-repeat right 10%;
      background-size: contain;
   }
   article.contents .ttlBox h1,
   article.contents .ttlBox h2,
   article.contents .ttlBox h3 {
      overflow: hidden;
      width: 39%;
      height: 12vw;
      padding-top: 5%;
      background: url(/static/cpn/ffm000018/img/logoTtl.png) no-repeat 0 bottom;
      background-size: contain;
      text-indent: 100%;
      white-space: nowrap;
   }
   article.contents .ttlBox h1 {
      overflow: visible;
      width: 7.5em;
      height: 2.5em;
      padding: 4% 0 0;
      background: none;
      font-weight: normal;
      text-indent: 0;
      white-space: pre-wrap;
   }
   article.contents .ttlBox h3 {
      overflow: visible;
      width: 12em;
      height: 2em;
      margin-bottom: 2%;
      padding: 6% 0 0;
      background: none;
      font-size: 130%;
      font-weight: normal;
      text-indent: 0;
      white-space: pre-wrap;
   }
   .buyNow {
      width: 80%;
      margin: 0 auto;
      margin-top: 8%;
      text-align: center;
   }

   /*----------------------------------------------
section #hederG
----------------------------------------------*/
   section#hederG {
      position: relative;
      margin-bottom: 4%;
      padding-top: 58px;
      letter-spacing: -.4em;
   }
   section#hederG figcaption {
      overflow: hidden;
      height: 56vw;
      font-size: 29px;
      text-indent: 100%;
      white-space: nowrap;
   }
   #hederG h1 {
      display: inline-block;
      margin-bottom: 1%;
      padding-top: 1%;
      letter-spacing: 0;
   }
   section#hederG figure {
      display: inline-block;
      width: 56%;
      letter-spacing: 0;
   }
   .ttl {
      display: inline-block;
      width: 40%;
      text-align: center;
      vertical-align: top;
      letter-spacing: 0;
   }
   .ttl h2 {
      overflow: hidden;
      position: absolute;
      top: 3%;
      left: 18px;
      width: 93%;
      height: 3%;
      /* background: url(/static/cpn/ffm000018/img/hederTtl.png) no-repeat; */
      font-size: 29px;
      text-indent: 100%;
      white-space: nowrap;
   }
   .ttl h3 {
      overflow: hidden;
      margin-bottom: 6px;
      /* background: url(/static/cpn/ffm000018/img/start.png) no-repeat center; */
      font-size: 5%;
      text-indent: 100%;
      text-align: center;
      white-space: nowrap;
   }
   #hederG .buyNow {
      display: inline-block;
      width: 39%;
      text-align: center;
      vertical-align: top;
      letter-spacing: 0;
   }
   #hederG .buyNow img {
      width: 35%;
      height: auto;
      margin-top: -1%;
   }
   #hederG .buyNow p.buy img {
      margin: 2% 0;
   }
   /*----------------------------------------------
section #present
----------------------------------------------*/

   .presentBox {
      width: 97%;
      margin: 0 auto;
      padding-bottom: 8%;
      color: #333;
      text-align: center;
   }
   section#present .presentTtl {
      height: auto;
      margin-bottom: 10%;
      border-bottom: 3px outset #518DEF;
      background: none;
      color: #2760be;
      font-size: 170%;
      font-weight: bold;
      text-align: center;
   
      letter-spacing: -1px;
      line-height: 1.5;
      text-shadow: 0 0 5px #4ECEEC, 0 0 6px #4ECEEC,0 0 2px #fff;
}
   #present .presenttxt {
      overflow: visible;
      width: 15.5em;
      height: auto;
      margin: 0 auto 0;
      margin-bottom: 5%;
      background: none;
      color: #020d23;
      font-size: 150%;
      text-indent: 0;
      line-height: 1;
      white-space: pre-wrap;
   
      text-shadow: 1px 1px 0 rgb(255, 255, 255), 3px 3px 0 rgb(241, 227, 223);
}
   h3.presentDetails {
      width: 96%;
      margin: 0 auto 0;
      margin-bottom: 5%;
      color: #020d23;
      font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
      font-size: 96%;
      font-weight: normal;
      text-align: center;
      line-height: 1.25;
      letter-spacing: -1px;
   
      display: inline-block;   position: relative;
      background-color: #BCE5FF;
      padding: 2%;
      /* z-index: 100; */
}
 h3.presentDetails:after {
    position: absolute;
    content: "";
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3); /* シャドウ */
    transform: rotate(3deg); /* 回転させる */
    right: 0px;
    left: auto;
    top: auto;
    bottom: 10px;
    z-index: -1;
    width: 50%;
    height: 20%;
    z-index: -1;
}
   .present {
      display: -webkit-box;
      display:         flex;
      display: -webkit-flex;
      margin-bottom: 3%;

      -webkit-box-pack: justify;
              justify-content: space-around;
      -webkit-justify-content: space-around;
   }
   .present figure span {
      position: absolute;
      top: 1%;
      left: 1%;
   }
   .present figure img {
      vertical-align: bottom;
   }
   .present figcaption {
      padding: 1% 0 0 0;
      font-size: 14px;
      font-weight: bold;
   }
   .present figure.note,
   .present figure.memo {
      height: 20vw;
      padding-top: 11%;
   }
   .present figure {
      display: inline-block;
      position: relative;
      width: 27%;
      height: 30vw;
      margin-right: 5px;
      padding-top: 13px;
      background-color: #fff;
      color: #555;

      -webkit-box-flex: 0
      flex: auto;
      -webkit-flex: inherit;
   }

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

   div.glovalNavi {
      width: 97%;
      margin: 7px auto 4%;
   }
   div.glovalNavi ul {
      display: -webkit-box;
      display:         flex;
      display: -webkit-flex;
      width: 97%;
      background: url(/static/cpn/ffm000018/img/bg_btn.jpg) repeat;
      text-align: center;
      letter-spacing: 0;

      -webkit-box-pack: justify;
              justify-content: center;
      -webkit-justify-content: center;
      /* padding: 0 2%; */
   }
   div.glovalNavi ul li {
      display: inline-block;
      width: 15%;
      height: 5%;
      border-right: 2px solid #1f303a;
      box-shadow: 0 0 1px #a5b6c0;
      color: #fff;
      font-size: 3%;
      text-align: center;

      -webkit-box-flex: 1;
              flex: auto;
      -webkit-flex: auto;
   }
   div.glovalNavi ul li a {
      display: inline-block;
      display: inline-block;
      overflow: hidden;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      width: 100%;
      color: #fff;
      text-decoration: none;
      text-indent: 100%;
      line-height: 5%;
      white-space: nowrap;
   }
   li.btn_1 a {
      background: url(/static/cpn/ffm000018/img/btn_1.png) no-repeat bottom;
   }
   li.btn_2 a {
      background: url(/static/cpn/ffm000018/img/btn_2.png) no-repeat bottom;
   }
   li.btn_3 a {
      background: url(/static/cpn/ffm000018/img/btn_3.png) no-repeat bottom;
   }
   li.btn_4 a {
      background: url(/static/cpn/ffm000018/img/btn_4.png) no-repeat bottom;
   }
   li.btn_5 a {
      background: url(/static/cpn/ffm000018/img/btn_5.png) no-repeat bottom;
   }
   div.glovalNavi ul li.last a {
      border-right: none;
      background: url(/static/cpn/ffm000018/img/btn_6.png) no-repeat bottom;
   }
   div.glovalNavi ul li:first-child {
      /* border-left: 2px solid #1f303a; */
   }
   div.glovalNavi ul li:farst-child {
      border-right: none;
      box-shadow: 0 0 0 #a5b6c0;
   }
   /*----------------------------------------------
trailer_box
----------------------------------------------*/
   .trailer_box:after {
      display: block;
      clear: both;
      content: "";
   }
   div#movieInfo h2,
   section#introduction h2,
   section#story h2 {
      overflow: visible;
      margin: 3% auto;
      padding-bottom: 1%;
      background: none;
      font-size: 150%;
      font-weight: normal;
      text-indent: 0;
      text-align: center;
      line-height: 1.3;
      white-space: pre-wrap;
   }
   section#story h2 {
      font-size: 3%;
   }
   .trailer_box .trailermovie {
      width: 64%;
      margin: 1% auto 2%;
   }
   .tralerBox .prevew {
      margin: 0 auto;
      text-align: center;
   }
   .tralerBox .prevew li {
      display: inline-block;
      position: relative;
      width: 49%;
      margin: 0 0 1em 0;
      text-align: center;
      vertical-align: top;
   }
   .tralerBox .prevew li a:after {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(/static/cpn/ffm000018/img/prev.png) no-repeat center 35%;
      background-size: 45px;
      content: "";
   }
   .tralerBox .prevew p.movieTtl {
      display: block;
      padding-top: 5%;
      text-align: center;
   }
   .tralerBox .prevew a {
      display: block;
   }
   .tralerBox .prevew li img {
      width: 100%;
      height: auto;
      background-color: #052338;
   }
   .trailer_box img {
      width: 64%;
      vertical-align: bottom;
   }
   /*----------------------------------------------
section #movieInfo
----------------------------------------------*/
   section.trailer {
      padding-top: 3%;
      background: hsl(206, 100%, 11%);
   }
   div#movieInfo {
      background: url(/static/cpn/ffm000018/img/bg_dotts.jpg);
      text-align: center;
   }
   div#movieInfo .trailTTL,
   section#introduction,
   section#story {
      padding: 3% 0 0;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(.50, #fefffe), color-stop(.00, #eef0f3));
      background: -webkit-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
      background:    -moz-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
      background:      -o-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
      background:     -ms-linear-gradient(top, #eef0f3 0%, #fefffe 50%, #fff 100%);
      background:         linear-gradient(to bottom, #eef0f3 0%, #fefffe 50%, #fff 100%);
   }
   div#movieInfo .tralerAria {
      margin-bottom: 2%;
      padding: 2% 0 5%;
   }
   section#introduction {
      margin-bottom: 3%;
   }
   section#introduction h2 {
      height: 83px;
      height: auto;
      background: none;
      text-shadow: 0 1px 0 #959229;
      text-align: left;
   
}
   div#movieInfo h1,
   section#introduction h1,
   section#story h1,
   section#character h1,
   section#hitWork h1,
   #present .presentTtl {
      overflow: visible;
      width: 93%;
      margin: 0 auto;
      background-color: #002d50;
      color: #fff;
      color: #dba127;
      font-size: 150%;
      font-weight: normal;
      text-indent: 0;
      text-align: center;
      text-align: left;
      line-height: 1;
      white-space: pre-wrap;
      letter-spacing: 1px;
   
      text-shadow: 0 2px 1px #231801;
      font-weight: bold;
      background: #1e3971;    background: -moz-linear-gradient(top, #091938, #1e3971);    background: -webkit-gradient(linear,      left top,      left bottom,      from(#091938),      to(#1e3971));    border-radius: 3px;    color: #fff;        
      /* font-family:"Haruhi Gakuen", sans-serif; */        letter-spacing: 2px;    margin: 0 auto;    
      padding: 3%;    
      text-shadow: 0 0 5px #FFCF26, 0 0 6px #FFCF26,0 0 2px #fff;
      height: auto;
}
   div#movieInfo h1 {
      background: none;
      
}
   section#introduction h1 {
      margin-bottom: 3%;
      background: none;
   
}
   section#story h1 {
      margin-bottom: 3%;
      background: none;
   }


   div#movieInfo:target h1,
   section#introduction:target h1,
   section#story:target h1 {
      color: #f2e284;
      -webkit-transition: all .3s;
         -moz-transition: all  .3s;
           -o-transition: all  .3s;
              transition: all .3s;
   }
   div#movieInfo h2 {
      width: 11em;
      font-weight: normal;
   
}
   #introduction p.movieIntro_2,
   #introduction p.movieIntro_3,
   #introduction p.movieIntro_4,
   #story p.storyDetail,
   section#story p {
      width: 98%;
      margin: 0 auto 2%;
      line-height: 1.5;
   }
   section#introduction h2 small {
      font-size: 12px;
   }
   section#introduction h2 span {
      display: block;
   }
   #introduction p.movieIntro {
      width: 98%;
      margin: 0 auto 25px;
      text-indent: 1em;
      line-height: 1.5;
   }
   #introduction p,
   section#story p {
      font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 1px;
   }
   #introduction .movieCap,
   section#story .movieCap {
      padding: 2% 0 0;
      background: url(/static/cpn/ffm000018/img/bg_dotts.jpg);
      text-align: center;
   }
   div#movieInfo .trailTTL,
   section#introduction,
   section#story {
      width: 97%;
      margin: 0 auto;
      padding: 0;
      background: transparent;
   
}
   section#story {
      margin-bottom: 6%;
      background: hsl(206, 100%, 11%);
   }

   /*----------------------------------------------
section#hitWork
----------------------------------------------*/
   section#hitWork {
      width: 97%;
      margin: 0 auto;
   
      background: hsl(206, 100%, 11%);
}
   section#hitWork .works,
   section#present .product {
      display: -webkit-box;
      display: flex;
      display: -webkit-flex;
      width: 100%;
      font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
      text-align: center;
    -webkit-box-pack: justify;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
   }
   section#present .product figure {
      display: inline-block;
      width: 49%;
      margin-bottom: 2%;
      color: #000;
      font-size: 120%;
      vertical-align: top;
      line-height: 1.5;
          -webkit-box-flex: 1;
          flex: auto;
          -webkit-flex: auto;
   }
   section#present .product figure.note {
      width: 49%;
   }
   section#hitWork .works dt img {
      width: 100%;
   }
   section#hitWork .works dl {
      display: inline-block;
      width: 30%;
      margin-bottom: 2%;
      -webkit-box-flex: 1;
    flex: auto;
    -webkit-flex: auto;
   }
   .into_copyright {
      padding: 8% 18% 1% 0;
      background: url(/static/cpn/ffm000018/img/heal.png) no-repeat right bottom ;
      text-align: right;
   }
   section#present .product figure span {
      display: block;
   }
   section#present .product figure figcaption {
      display: inline-block;
      width: 47%;
      height: auto;
      padding-top: 5%;
      text-align: left;
      vertical-align: top;
   
      letter-spacing: -1px;
      font-size: 86%;
}
   .presentBox p, .presentBox h4 {
      width: 80%;
      margin: 0 auto;
   }

   section#present .product figure img {
      width: 49%;
   }
   section#present .product figure figcaption span {
   }

   section#present .product figure.note figcaption {
      height: auto;
   }
   /*----------------------------------------------
section#character
----------------------------------------------*/
   section#character {
      width: 96%;
      margin: 0 auto 8%;
      padding: 0 2%;
   }
   section#character h1 {
      background: none;
   }
   section#character ul li.cap {
      display: inline-block;
      overflow: hidden;
      width: 63%;
      margin-left: 1%;
      font-size: 200%;
      font-weight: normal;
      text-indent: 100%;
      vertical-align: top;
      white-space: nowrap;
   }
   section#character ul li img {
      width: 100%;
   }
   section#character ul li h2,
   section#character ul li h3,
   section#character ul li h4 {
      font-size: 100%;
      font-weight: normal;
   }
   section#character ul {
      width: 100%;
      height: auto;
      margin-bottom: 15px;
      padding-bottom: 1%;
      border-bottom: 3px dotted #9d9fa3;
      letter-spacing: -.4em;
   }
   section#character ul.chara5 {
      border: none;
   }
   section#character ul li {
      display: inline-block;
      width: 36%;
      letter-spacing: 0;
   }
   ul.chara1 li.cap {
      height: 16vw;
      background: url(/static/cpn/ffm000018/img/chara_txt1.png) no-repeat center;
      background-size: contain;
   }
   ul.chara2 li.cap {
      height: 20vw;
      background: url(/static/cpn/ffm000018/img/chara_txt2.png) no-repeat center;
      background-size: contain;
   }
   ul.chara3 li.cap {
      height: 18vw;
      background: url(/static/cpn/ffm000018/img/chara_txt3.png) no-repeat center;
      background-size: contain;
   }
   ul.chara4 li.cap {
      height: 15vw;
      background: url(/static/cpn/ffm000018/img/chara_txt4.png) no-repeat center;
      background-size: contain;
   }
   ul.chara5 li.cap {
      height: 22vw;
      background: url(/static/cpn/ffm000018/img/chara_txt5.png) no-repeat right center;
      background-size: contain;
   }
   /*--------------------------------------------------------------
   section#hitWork
---------------------------------------------------------------*/


   section#hitWork h1 {
      height: 2em;
      margin-bottom: 3%;
      background: none;
   }
   section#hitWork h2 {
      overflow: visible;
      margin: 5% 0;
      background: none;
      font-size: 137%;
      text-indent: 0;
      text-align: center;
      white-space: pre-wrap;
      letter-spacing: -1px;
   
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.58), 3px 3px 0 rgba(241, 227, 223, 0.32);
}
   section#hitWork .works dl a {
      color: #fff;
   }
   section#hitWork .works dd h3 {
      margin-bottom: 3%;
      font-size: 14px;
      font-weight: normal;
      line-height: 1;
   }
   /*--------------------------------------------------------------
    section#present
---------------------------------------------------------------*/
   section#present {
      padding-top: 8%;
      background-color: #fff;
   }
   section#footer {
      font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
   }
}

/*============================================================
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;
}
.fitWindows .tralerBox .prevew {
   color: #000;
}
.fitWindows iframe{
    display: none;
}
/* cpnInfo
------------------------------------------------------------*/

.cpnInfo {
   margin: 0 auto 20px;
   background-color: #fff;
   color: #333;
}.cpnInfo .header {
   margin-bottom: 1em;
}.cpnInfo .header img {
   width: 100%;
}.cpnInfo div.img {
   max-width: 980px;
   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 {
   width: 970px;
   margin: 0 auto;
   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 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 {
      width: 94%;
      margin: 0 auto 2%;
      font-size: 100%;
   }
}