@charset "utf-8";

/* //////////////////////////////////////////////////

　for Smart Phone

////////////////////////////////////////////////// */

/* layout
-------------------------------------------------- */
#contents {
  width: auto;
}

.container {
  width: auto;
  padding: 0 10px;
}

.sp_img {
  width: 100%;
  height: auto;
}

.flL_pc, .flR_pc {
  float: none;
}

.sp_noFloat {
  float: none;
}

.bgContents {
  padding: 40px 0 10px;
}

.sec-basic {
  padding: 35px 15px;
}

.tabs ul.tab-season {
  margin: 15px 10px;
}

/* header
-------------------------------------------------- */
#header {
  min-width: 320px;
}

#header h1 {
  text-align: center;
  top: 8px;
  width: 100%;
}

#header .container {
  height: auto;
  padding: 20px 10px 15px;
}

#header .social {
  margin: 5px 0;
  padding: 0;
  border: none;
}

#header .hLink {
  float: right;
  margin: 0;
}

#header .hLink a {
  font-size: 11px;
}

/* navi
-------------------------------------------------- */
#navBtn {
  display: block;
  position: absolute;
  top: 68px;
  right: 10px;
  z-index: 20;
  padding: 10px 0;
  width: 40px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #000;
  font-size: 0;
  text-align: center;
}

#navBtn.active {
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

#gNavi {
  display: none;
  z-index: 100;
  bottom: inherit;
  top: 100px;
  right: 0;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.6);
}

#gNavi li {
  float: none;
  padding-left: 30px;
  background: url(../img/common/mrk_link01.png) no-repeat 10px 50%;
}

#gNavi a {
  display: block;
  width: 100% !important;
  height: auto;
  padding: 8px 0;
  text-indent: 0;
  background: none;
  font-size: 18px;
  text-decoration: none;
}

/* 公式バナー */
#bnr_official {
  width: 100%;
}

#bnr_official li {
  display: block;
  margin: 0 0 10px 0;
  width: 50%;
  height: auto;
  text-align: center;
  float: left;
}

#bnr_official li img {
  width: 95%;
  height: auto;
}

/* contents
-------------------------------------------------- */
/* パンくず */
#breadcramb {
  width: auto;
  margin-right: 10px;
}

/* タイトル */
.pagetit span {
  display: block;
}

/* footer
-------------------------------------------------- */
#footer {
  width: auto;
  text-align: center;
}

#footer .container {
  width: auto;
}

#footer .fLink,
#footer .copy02 {
  float: none;
}

.inSec {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.pagetit {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* ホーム
-------------------------------------------------- */
#g01 #movie {
  position: relative;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  padding-top: 0px;
  padding-bottom: 0%;
  overflow: hidden;
}

#g01 #movie .movie_area {
  vertical-align: bottom;
  position: absolute;
  padding: 0;
  background-color: #242424;
  width: 60%;
  height: 40%;
  top: 55%;
  left: 3%;
  text-align: center;
}

#g01 #movie .movie_area img {
  width: 90%;
  height: auto;
}

#g01 #movie div img {
  /*     margin-left: 9999px; */
}

#g01 #movie iframe {
  position: absolute;
  bottom: 5%;
  left: 50%%;
  height: 75%;
  width: 60%;
  margin-left: -30%;
}

#g01 #contents .menu {
  width: auto;
}

#g01 #contents .menu li {
  width: 46%;
  margin: 0 2% 15px;
  text-align: center;
  height: auto;
  position: relative;
}

#g01 #contents .menu li a {
  padding: 0 0 13px;
  line-height: 1;
}

#g01 #contents .menu li span {
  float: none;
  display: block;
  padding: 0;
  margin-bottom: 4px;
}

#g01 #contents .menu li span.icon {
  font-size: 13px;
  margin-right: 0px;
  position: absolute;
  right: 10px;
  top: 10px;
  font-weight: bold;
}

#g01 #contents .banners {
  width: auto;
  text-align: center;
}

#g01 #contents .banners li {
  float: none;
  margin: 0 0 10px;
  text-align: center;
}

#g01 #contents .banners li img {
  width: 90%;
  height: auto;
}

#g01 #contents .banners .walterwhite {
  margin-top: 10px;
  margin-left: 0;
}

#g01 #social .socialin {
  width: 90%;
  margin: 0 auto;
}

#g01 #social.social {
  padding: 20px 2%;
}

#g01 #social.social .fb,
#g01 #social.social .tw {
  width: 100% !important;
  margin-bottom: 20px;
  overflow: hidden;
}

#g01 #social.social .tw {
  margin-bottom: 0;
}

#g01 #social.social .fb iframe,
#g01 #social.social .tw iframe {
  width: 100% !important;
}

/* 2014.09.19更新 */
#g01 #mainvisual {
  height: auto;
  position: relative;
}

#g01 #mainvisual #bnr_watch {
  position: static;
  width: 100%;
  height: auto;
  display: none;
}

#g01 #mainvisual #dramanavi_cp {
  position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  /* background: #000000; */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#g01 #mainvisual #dramanavi_cp strong {
  font-size: 17px;
  display: block;
}

#g01 #mainvisual br.sm {
  display: block;
}

/* Introduction
-------------------------------------------------- */
#g02 .sec-basic h3 {
  font-size: 18px;
}

#g02 #sec01 {
  position: static;
  padding: 35px 15px;
  height: auto;
}

#g02 #sec01 .poA {
  position: static;
  padding-top: 20px;
  max-width: 365px;
}

#g02 .col2 {
  width: auto;
}

#bnr_intro li {
  display: block;
  margin-bottom: 5px;
}

/* story
-------------------------------------------------- */
#g03 .story .img,
#g03 .story .content {
  width: auto;
  float: none;
}

#g03 .story .img {
  margin-top: 20px;
  text-align: center;
}

#g03 .story .img img {
  width: 100%;
  max-width: 300px;
}

#g03 .tab-story {
  padding: 10px;
}

#g03 .story section {
  padding: 40px 10px 30px;
}

/* Cast
-------------------------------------------------- */
#g04 .inSec {
  padding: 30px 0 0px 20px;
}

#g04 .box {
  margin: 0 20px 40px 0;
}

#g04 .box.col1 {
  min-height: auto;
}

#g04 .box.col2 {
  width: auto;
}

#g04 .box.col3 {
  width: auto;
}

#g04 #cast .box.col1 {
  padding-left: 0;
}

#g04 #staff .box.col1 {
  padding-right: 0;
}

#g04 .box .pic.flL_pc {
  margin-right: 0;
}

#g04 .box .pic.flR_pc {
  margin-left: 0;
}

#g04 #cast .col1 .pic,
#g04 #staff .col1 .pic {
  position: static;
}

#g04 .col2 .pic {
  width: auto;
}

#g04 .col3 .pic {
  height: auto;
}

#g04 .col2 .pic img {
  margin-left: 0;
}

#g04 .box .pic {
  text-align: center;
  margin-bottom: 10px;
}

#g04 #interview {
  margin-right: 0px;
}

/* gallery
-------------------------------------------------- */
#g05 .inSec {
  padding: 35px 0;
  border-top: 1px solid #404040;
}

#g05 #gallery #slider {
  width: 100%;
}

#g05 #gallery #carousel {
  width: 100%;
  margin: 0 auto;
}

/* Blu-ray™ & DVD
-------------------------------------------------- */
#g06 .product .img,
#g06 .product .content,
#g06 .product .buttons {
  width: auto;
  float: none;
}

#g06 .product .img {
  margin: 20px 0;
}

#g06 .product .img img {
  width: 100%;
  max-width: 300px;
}

#g06 .ul-inline {
  text-align: center;
}

/* Movie
-------------------------------------------------- */
#g07 .inSec {
  position: relative;
  width: 90%;
  padding: 56.25% 0 20px 30px;
  margin: 35px auto;
}

#g07 .inSec iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 20px 0;
}

#g07 #movie {
  padding: 30px 0 20px 0px;
}

#g07 .movie iframe {
  width: 100% !important;
  height: auto !important;
}

#g07 .movie,
#g07 .tabs ul.tab-season {
  width: 200px;
}

#g07 .movie object,
#g07 .movie video {
  width: 200px;
  height: 113px;
  display: block;
  margin: 0 auto 10px;
}

@media screen and (min-width: 320px) {
  #g07 .movie,
  #g07 .tabs ul.tab-season {
    width: 275px;
  }

  #g07 .movie object,
  #g07 .movie video {
    width: 275px;
    height: 155px;
  }
}
@media screen and (min-width: 400px) {
  #g07 .movie,
  #g07 .tabs ul.tab-season {
    width: 347px;
  }

  #g07 .movie object,
  #g07 .movie video {
    width: 347px;
    height: 195px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 500px) {
  #g07 .movie,
  #g07 .tabs ul.tab-season {
    width: 437px;
  }

  #g07 .movie object,
  #g07 .movie video {
    width: 437px;
    height: 246px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 600px) {
  #g07 .movie,
  #g07 .tabs ul.tab-season {
    width: 527px;
  }

  #g07 .movie object,
  #g07 .movie video {
    width: 527px;
    height: 296px;
    margin: 0 auto;
  }
}
/* Interview
-------------------------------------------------- */
#g08 .column:last-child {
  background: none;
  padding-bottom: 0;
}

#g08 .column .content {
  width: 100%;
  float: none;
}

#g08 .column .img {
  float: none;
  margin: 10px 0 0;
  text-align: center;
}

#g08 #interview {
  margin-right: 0;
}

#g08 #interview .pic,
#g08 #interview .pic_r,
#g08 #interview .pic_l {
  float: none;
  margin-left: 0;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

#g08 #interview .pic img,
#g08 #interview .pic_r img,
#g08 #interview .pic_l img {
  width: 90%;
  height: auto;
}

/* ニュース
-------------------------------------------------- */
#g09 .inSec {
  padding: 30px 30px 0 30px;
  border-top: 1px solid #404040;
}

#g09 .content,
#g09 #sidemenu {
  width: 100%;
}

#g09 .content {
  margin-bottom: 20px;
}

#g09 #sidemenu li {
  border-bottom: 1px solid #404040;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#g09 #sidemenu li a p {
  width: auto;
  margin-left: 60px;
  font-size: 11px;
  text-decoration: none;
  line-height: 1.4;
  float: none;
}

#g09 #sidemenu li a:hover p {
  text-decoration: underline;
}

#g09 .content {
  color: #a5a5a5;
}

#g09 .content img {
  max-width: 280px;
  height: auto;
}

#g09 .content h3 {
  overflow: hidden;
  margin-bottom: 10px;
  padding-left: 10px;
  color: #23bd3c;
  background: url(../img/common/mrk_tit01.png) no-repeat 0 50%;
}

#g09 .content h4 {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: bold;
}

#g09 .content p {
  margin-bottom: 15px;
}

#g09 .content img.flR,
#g09 .content img.flL {
  margin: 0 auto 10px;
  float: none;
  max-width: 280px;
  height: auto;
  display: block;
}

/* answer
-------------------------------------------------- */
.YoutubeWrapper {
  position: relative;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  padding-top: 69px;
  padding-bottom: 50%;
  overflow: hidden;
}

.YoutubeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.YoutubeWrapper,
#answer_area {
  width: 100%;
}

#answer_area h2 {
  font-size: 14px;
  line-height: 1.4;
  margin: 40px 0 10px 0;
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
  text-indent: 1em;
}

#answer_area h2 br.sm {
  display: block;
}

/* Digital
-------------------------------------------------- */
#g10 .sec-basic h3 {
  font-size: 18px;
  margin-bottom: 40px;
  color: #ece8e7;
  line-height: 1.8;
  margin-top: 15px;
  margin-left: 0px;
  float: right;
  width: 152px;
}

#g10 #sec01 {
  position: static;
  padding: 35px 15px;
  height: auto;
}

#g10 #sec01 .poA {
  position: static;
  padding-top: 20px;
  max-width: 365px;
}

#g10 .col2 {
  width: auto;
}

#g10 .bgContents .logo img {
  width: 41%;
}

#g10 .bgContents .logo {
  margin-bottom: 22px;
  width: 100%;
}

#g10 .bgContents .haisin {
  background-color: #000431;
  padding: 15px 13px 10px 13px;
  margin-left: 0px;
  text-align: center;
}

#g10 .bgContents .haisin .sub_title {
  margin-bottom: 10px;
  width: 97%;
}

#g10 .bgContents .haisin img {
  padding: 0 5px 10px 5px;
  /* width: 120px; */
  width: 40%;
}

/*
#g10 .bgContents .haisin .sp_xbox {
    margin-right: 137px;
}
*/
/* watch
-------------------------------------------------- */
#watch #movie {
  padding: 30px 0 20px 0px;
}

#watch .movie,
#watch #contents p,
#watch #contents .indent {
  width: 200px;
  margin: 0 auto;
  font-size: 11px;
}

#watch .movie object,
#watch .movie video {
  width: 200px;
  height: 113px;
  display: block;
  margin: 0 auto 10px;
}

@media screen and (min-width: 320px) {
  #watch .movie,
  #watch #contents p,
  #watch #contents .indent {
    width: 275px;
  }

  #watch .movie object,
  #watch .movie video {
    width: 275px;
    height: 155px;
  }
}
@media screen and (min-width: 400px) {
  #watch .movie,
  #watch #contents p,
  #watch #contents .inden {
    width: 347px;
  }

  #watch .movie object,
  #watch .movie video {
    width: 347px;
    height: 195px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 500px) {
  #watch .movie,
  #watch #contents p,
  #watch #contents .inden {
    width: 437px;
  }

  #watch .movie object,
  #watch .movie video {
    width: 437px;
    height: 246px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 600px) {
  #watch .movie,
  #watch #contents p,
  #watch #contents .inden {
    width: 527px;
  }

  #watch .movie object,
  #watch .movie video {
    width: 527px;
    height: 296px;
    margin: 0 auto;
  }
}