@charset "utf-8";

/** fit footer window bottom **/
html, body, .wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.footer-fit-container {
  min-height: 100%;
  margin-bottom: -106px;
  height: auto;
}
* html .footer-fit-container { height:100%; }/* IE6 */
.footer-fit-container-inner {
  padding-bottom: 106px;
}

/** opening **/
main h1 {
  margin: 28px 0 0 0;
  width: 100%;
  height: 40px;
  font-size: 18px;
  font-family: "游ゴシック体","Yu Gothic",YuGothic,HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  background-color: rgb(255,153,153);
}
main h1 span {
  display: block;
  margin: 0 auto;
  width: 960px;
  height: 40px;
  font-size: 22px;
  color: rgb(25,25,25);
  letter-spacing: 0.2em;
  background-color: rgb(255,102,102);
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

/* opening movies */
main .opening-movies {
  position: relative;
  width: 984px;
  height: auto;
  margin: 0 auto;
  padding: 32px 0 12px 0;/* bottom=32-20*/
  text-align: center;
  font-size: 0;
  line-height: 1em;
}
main .opening-movies.selection { padding-top:42px; }
main .opening-movies > div {
  position: relative;
  display: inline-block;
  margin: 0 12px 20px 12px;
  padding: 12px;
  background: url("../img/pattern_line_60per.png");
  font-size: 14px;
  vertical-align: top;

  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}

main .opening-movies > div p.badge {
  position: absolute;
  top: -19px;
  left: -13px;
  margin: 0;
  padding: 0;
  display: block;
  width: 246px;
  height: 54px;
  background: url("../img/title_oppr/grandprix_badge.png") no-repeat 0 0;
  background-size: 246px 300px;
  text-indent: -9999px;
  text-align: left;
  z-index: 200;
}
main .opening-movies > div p.badge.maeda     { background-position: 0 -108px;width:140px;height:48px; }
main .opening-movies > div p.badge.tsurumaki { background-position: 0 -204px;width:164px;height:48px; }

main .opening-movies > div a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: hidden;

  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function:ease-in-out;
  -moz-transition-timing-function:ease-in-out;
  -o-transition-timing-function:ease-in-out;
  -ms-transition-timing-function:ease-in-out;

  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}
main .opening-movies > div a:hover {
  background: rgba(0,0,0,0.2) url("../img/pattern_line_60per.png");
}
main .opening-movies > div a span.play {
  position: absolute;
  display: block;
  top: 46px;
  left: 50%;
  margin: 0 0 0 -45px;
  padding: 0;
  width: 90px;
  height: 90px;
  background: url("../img/play_red_90.png") no-repeat 0 0;
  background-size: 90px 90px;
  text-indent: -9999px;
  opacity: 0.2;

  transform: scale(0.8,0.8);
  -webkit-transform: scale(0.8,0.8);
  -moz-transform: scale(0.8,0.8);
  -o-transform: scale(0.8,0.8);
  -ms-transform: scale(0.8,0.8);
  transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -ms-transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function:ease-in-out;
  -moz-transition-timing-function:ease-in-out;
  -o-transition-timing-function:ease-in-out;
  -ms-transition-timing-function:ease-in-out;
}
main .opening-movies > div a:hover span.play {
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  -ms-transform: scale(1,1);
  opacity: 0.8;
}

main .opening-movies > div .img-box { position: relative;width: 280px; }
main .opening-movies > div .img-box img { width: 100%; }

main .opening-movies > div .text-box {
  position: relative;
  width: 280px;
  background-color: rgb(255,255,255);
  text-align: center;
}
main .opening-movies > div .text-box h2 {
  display: block;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  font-size: 15px;
  font-family: "Yu Mincho",YuMincho,"游明朝体",HiraMinProN-W6,HiraMinPro-W6,"ヒラギノ明朝 Pro W6","Hiragino Mincho Pro W6",'メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',serif;
  font-weight: bold;
  letter-spacing: -1px;
  color: rgb(38,38,38);
}
main .opening-movies > div:nth-child(even) .text-box    { background-color: rgb(225,225,225); }
main .opening-movies > div:nth-child(even) .text-box h2 { color: rgb(25,25,25); }

main .opening-movies > div.ver-da .text-box h2 {
  font-family: HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","Yu Gothic",YuGothic,"游ゴシック体","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
}
main .opening-movies > div.ver-compe .text-box h2 {
  font-family: "Yu Gothic",YuGothic,"游ゴシック体",HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 1.2em;
  letter-spacing: 0;
}
main .opening-movies > div.ver-compe .text-box p {
  margin: 0 0 10px 0;
  display: block;
  font-size: 14px;
  font-family: "Yu Gothic",YuGothic,"游ゴシック体",HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1em;
}

main .opening-movies > div span.under-arrow {
  display: block;
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  margin: 0 0 0 -15px;
  padding: 0;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top: 18px solid rgb(60,60,60);
  opacity: 0;
}
main .opening-movies > div:hover span.under-arrow {
  bottom: -30px;
  opacity: 1;
}

/* opening movies */
main .opening-movies.selection {}

main .compe {
  margin: 0;
  background: rgb(250,250,250) url("../img/pattern_line_30per.png");
}
main .compe .compe-inner {
  display: table;
  margin: 28px auto;
  padding: 32px 0;
  width: 832px;
  border-top: 4px solid rgb(255,102,102);
  border-bottom: 4px solid rgb(255,102,102);
}
main .compe .compe-inner .upper-box {
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}
main .compe .compe-inner .upper-box h2 {
  display: block;
  margin: 0 auto 16px auto;
  padding: 0;
  width: 560px;
  height: 30px;
  background: url("../img/opening_head.png") no-repeat 0 0;
  background-size: 560px 60px;
  text-indent: -9999px;
}
main .compe .compe-inner .upper-box p {
  margin: 0 0 0 1em;
  padding: 0;
  font-size: 14px;
  font-family: 'Roboto',"Roboto-Light",HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  line-height: 1.8em;
  color: rgb(25,25,25);
}

main .compe .compe-inner .under-box {
  display: block;
  width: 100%;
  margin: 28px 0 0 0;
  padding: 0;
}
main .compe .compe-inner .under-box a.list {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 556px;
  height: 40px;
  background: url("../img/opening_ad_buttons_02.png") no-repeat 0 0;
  background-size: 556px 160px;
  text-indent: -9999px;
}
main .compe .compe-inner .under-box a.list:hover {
  background-position: 0 -40px;
}

/** responsible breakpoint **/
@media (max-width: 984px) {
  html,body {
    width: 984px;
  }
}

/** responsible breakpoint **/
@media (max-width: 640px) {

  /** fit footer window bottom off **/
  html,body,.wrap { width:auto;height:auto; }
  .footer-fit-container { min-height: 0;margin-bottom: 0; }
  * html .footer-fit-container { height:auto; }/* IE6 */
  .footer-fit-container-inner { padding-bottom: 0; }

  main h1 {
    margin: 0;
    height: 32px;
    line-height: 32px;
  }
  main h1 span {
    width: 100%;
    height: 32px;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 32px;
  }

  main .opening-movies { width:100%;padding: 12px 12px 0 12px; }
  main .opening-movies.selection { padding: 20px 12px 0 12px; }
  main .opening-movies > div {
    display: block;
    margin: 0 auto 8px auto;
    padding: 10px;
  }
  main .opening-movies.selection > div { margin-bottom:16px; }

  main .opening-movies > div p.badge.grandprix { top:-15px;left:-8px; }
  main .opening-movies > div p.badge.maeda     { top:-14px;left:-8px; }
  main .opening-movies > div p.badge.tsurumaki { top:-14px;left:-8px; }

  main .opening-movies > div .img-box              { width:100%; }
  main .opening-movies > div .text-box             { width:100%; }
  main .opening-movies > div .text-box h2          { padding:6px 0 4px 0; }
  main .opening-movies > div.ver-compe .text-box p { margin:0 0 4px 0; }
  main .opening-movies > div a:hover               { background:none; }

  main .opening-movies > div a span.play,
  main .opening-movies > div a:hover span.play {
    top: 50%;
    margin: -48px 0 0 -35px;
    width: 70px;
    height: 70px;
    background: url("../img/play_red_70.png") no-repeat 0 0;
    background-size: 70px 70px;
    opacity: 0.8;

    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
  }
  main .opening-movies.selection > div a span.play,
  main .opening-movies.selection > div a:hover span.play { margin-top: -67px; }

  main .compe { margin-bottom:0; }
  main .compe .compe-inner {
    display: block;
    width: 100%;
    margin: 20px auto;
    padding: 20px 0;
  }
  main .compe .compe-inner .upper-box {
    display: block;
    width: 100%;
  }
  main .compe .compe-inner .upper-box h2 {
    display: block;
    margin: 0 auto 10px auto;
    padding: 0;
    width: 320px;
    height: 18px;
    background: url("../img/opening_head_sp.png") no-repeat 0 0;
    background-size: 320px 68px;
  }
  main .compe .compe-inner .upper-box p {
    margin: 0;
    padding: 0 1em;
    font-size: 13px;
    line-height: 1.6em;
  }
  main .compe .compe-inner .under-box { margin-top: 10px; }
  main .compe .compe-inner .under-box a.list {
    width: 300px;
    height: 40px;
    background: url("../img/opening_ad_buttons_sp.png") no-repeat 0 -160px;
    background-size: 300px 320px;
  }
  main .compe .compe-inner .under-box a.list:hover { background-position: 0 0; }

}