@charset "UTF-8";
/*-------------------------------
共通設定
--------------------------------*/
#mtm000007 a:hover {
   text-decoration:underline;
}
#mtm000007 .sns_Aria a:hover {
   text-decoration:none;
}
#globalNavi.naviFixed {
   display: none;
}
#mtm000007 .container {
   width: 100%;
   margin: 0 auto 100px;
   font-size: 16px;
}
#mtm000007.sp .container {
   width: 100%;
   margin: 0 auto;
   font-size: 100%;
}
#mtm000007.sp .container img {
   width: 100%;
   vertical-align: bottom;
}
.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.matomeTxt {
   border: solid 4px #e1e1e1;
   line-height: 1.5em;
}
section.contentsArea h2 {
   color: #ffffff;
   background-color:#333333;
}
section.contentsArea h2::before {
   content:"";
   display: inline-block;
   vertical-align: middle;
}
section.contentsArea h2 span {
   vertical-align:middle;
   line-height: 1;
}
section.contentsArea .keyPoint {
   background-color: #ffffff;
   border-top: 2px dashed #cbd3d8;
}
/* sns */
ul.sns_Btn {
   display: table;
   border-spacing: 3px 0;
   border-collapse: separate;
   width: 100%;
   margin: 0 auto 5px;
}
ul.sns_Btn li {
   display: table-cell;
   width: 33%;
   margin: 0 1%;
   border-top: 1px solid rgba(255,255,255,.2);
   border-bottom: 1px solid rgba(0,0,0,.2);
   border-radius: 3px;
   text-align: center;
   vertical-align: middle;
}
ul.sns_Btn li.snsTw {
   background: #55acee url(/static/mtm/000007/img/twIcon.png) no-repeat 0 center;
   background-size: 34px;
}
ul.sns_Btn li.snsFb {
   background: #3b5999 url(/static/mtm/000007/img/fbIcon.png) no-repeat 0 center;
   background-size: 28px;
   letter-spacing: 2px;
}
ul.sns_Btn li a {
   display: block;
   color: #fff;
}
ul.sns_Btn li.snsTw a {
   padding-left: 35px;
}
ul.sns_Btn li.snsFb a {
   padding-left: 24px;
}
/* civilwar */
#civilwar.contentsArea h2 {
   background-color: #0b0168;
}
#civilwar.contentsArea h3,
#civilwar.contentsArea h4,
#civilwar.contentsArea h5 {
   color: #0b0168;
}
#civilwar.contentsArea h5 span {
   vertical-align: middle;
}
#civilwar.contentsArea .dramaWrap {
   background-color: #e6ecf0;
}
#civilwar.contentsArea .subDetail {
   border-color: #0b0168;
}
/* deadpool */
#deadpool.contentsArea h2 {
   background-color: #bc0606;
}
#deadpool.contentsArea h3 {
   color: #bc0606;
}
#deadpool.contentsArea .dramaWrap {
   background-color: #fcf4f4;
}
#deadpool.contentsArea .subDetail {
   border-color: #bc0606;
}
/* afterword */
#afterword.contentsArea h2 {
   background: none;
   color: #333333;
}
/*----------------------------------------------
  pc
----------------------------------------------*/
/* --- section recomend --- */
.pc .matome {
   position: relative;
   margin-bottom: 35px;
}
.pc h1.head {
   min-height: 160px;
   padding-left: 310px;
   background:url(/static/mtm/000007/img/tag.jpg) no-repeat 0 0;
   font-size: 32px;
}
.pc h1.head small{
    font-size: 80%;
}
.pc h1.head span{
    font-size: 90%;
}
.pc section.recomend {
   width: 970px;
   margin: 0 auto 70px;
   padding-top: 20px;
   padding-bottom: 10px;
}
.pc div.matomeTxt {
   padding: 15px 15px 25px;
}
.pc div.matomeTxt p {
   margin-bottom:30px;
}
.pc div.matomeTxt p:first-child {
   margin-bottom: 15px;
}
.pc div.matomeTxt p:last-child {
   margin-bottom:0;
}
.pc div.matomeTxt p.annotation {
   font-size: 14px;
}
/*sns*/
.pc .sns_Aria {
   position: absolute;
   right: 0;
   bottom: -20px;
   width: 230px;
}
.pc ul.sns_Btn li.snsLi {
   display: none;
}
.pc ul.sns_Btn li a {
   height: 40px;
   line-height: 40px;
}
/* --- section contentsArea --- */
.pc section.contentsArea {
   width: 970px;
   margin: 0 auto 50px;
}
.pc section.contentsArea h2 {
   padding: 8px 10px;
   font-size: 22px;
}
.pc section.contentsArea h2::before {
   width: 36px;
   height: 35px;
   background:url(/static/mtm/000007/img/icon_movie.png) center;
   margin-right: 10px;
}
.pc section.contentsArea h3 {
   font-size: 22px;
}
.pc section.contentsArea .dramaWrap h3 {
   padding-left: 10px;
   margin-bottom: 20px;
   letter-spacing: -.04em;
}
.pc section.contentsArea .dramaWrap {
   margin-bottom: 35px;
   padding: 20px;
}
.pc section.contentsArea .dramaWrap p {
   margin-bottom: 30px;
}

.pc section.contentsArea .dramaWrap p:last-child {
   margin-bottom: 0 !important;
   letter-spacing: 1px;
   /* font-weight: bold; */
}
.pc section.contentsArea .drama {
   margin-bottom: 25px;
   letter-spacing: -.40em;
}
.pc section.contentsArea .dramaCap {
   display: inline-block;
   letter-spacing: normal; 
   width: 460px;
   background:url(/static/mtm/000007/img/snapshot.png) center;
   margin-bottom: 0 !important;
   line-height: 1 !important;
}
.pc section.contentsArea .dramaCap img {
   vertical-align: bottom;
}
.pc section.contentsArea .dramaDetail {
   display: inline-block;
   letter-spacing: normal;
   width: 450px;
   padding-left: 20px;
   vertical-align: top;
}
.pc section.contentsArea#compare .dramaWrap {
    margin-bottom: 35px;
    padding: 20px 15px 20px 0;
}
.pc section.contentsArea#compare .dramaDetail{
   padding-left: 40px;
}
.pc section.contentsArea .dramaWrap p,
.pc section.contentsArea .keyPoint p,
.pc section.contentsArea .subDetail p {
   line-height: 1.4;
   margin-bottom: 24px;
}
.pc section.contentsArea .keyPoint {
   padding: 14px 30px 20px 20px;
}
.pc section.contentsArea .subDetail {
   border-left: solid 10px;
   margin-bottom: 40px;
   padding-left: 20px;
}
.pc section.contentsArea .subDetail h3 {
   margin-bottom: 20px;
}
/* civilwar */
.pc #civilwar.contentsArea .dramaWrap h3 {
   border-left: solid 6px #0b0168;
}
.pc #civilwar.contentsArea h4 {
   font-size: 18px;
   margin-bottom: 5px;
}
.pc #civilwar.contentsArea h5 {
   font-size: 24px;
   margin-bottom: 4px;
}
.pc #civilwar.contentsArea h5 span.num {
   font-size: 40px;
   margin-right: 10px;
}
.pc #civilwar.contentsArea p.description {
   margin-top: 30px;
   line-height: 1.4;
}
.pc #civilwar.contentsArea .keyPoint {
   margin-bottom: 10px;
}
/* deadpool */
.pc #deadpool.contentsArea .dramaWrap h3 {
   border-left: solid 6px #bc0606;
}
/* deadpool */
.pc #compare.contentsArea .drama {
   margin-bottom: 0 !important;
}
/* afterword */
.pc #afterword.contentsArea {
   box-sizing: border-box;
   padding: 15px 15px 15px 80px;
   background: #f4f4f4 url(/static/mtm/000007/img/icon_baloon.png) 10px 10px no-repeat;
   line-height: 1.4;
}
.pc #afterword.contentsArea h2 {
   margin-bottom: 15px;
   padding: 0;
}
.pc #afterword.contentsArea h2::before {
   display: none;
}
/* worklist */
.pc #worklist.contentsArea h2 {
   margin-bottom: 20px;
}
.pc #worklist.contentsArea ul {
   margin-left: -9px;
   letter-spacing: -.40em;
   overflow: hidden;
}
.pc #worklist.contentsArea li {
   display: inline-block;
   width: 187px;
   margin-bottom: 40px;
   font-size: 14px;
   text-align: left;
   vertical-align: top;
   letter-spacing: normal;
   margin-left: 8px;
}
.pc #worklist.contentsArea .worklist li span {
   display: block;
   font-size: 14px;
   text-align: center;
}
.pc section.copyright {
   width: 970px;
   margin: 30px auto;
   font-size: 14px;
}
/*----------------------------------------------
  sp
----------------------------------------------*/
/* --- section recomend --- */
.sp .matome {
   width: 100%;
   margin-bottom: 0;
   padding: 3% 0;
}
.sp h1.head {
   width: 100%;
   min-height: auto;
   margin-bottom: 5%;
   padding-left: 0;
   background: none;
   font-size: 1rem;
   /* text-align: center; */
}
.sp h1.head::after {
   display: block;
   padding: 27%;
   background:url(/static/mtm/000007/img/tag_sp.jpg) no-repeat center bottom;
   -webkit-background-size: 94% auto;
           background-size: 94% auto;
   content: "";
}
.sp div.matomeTxt {
   padding: 3%;
   margin-bottom: 5%;
}
.sp div.matomeTxt p {
   margin-bottom:5%;
}
.sp div.matomeTxt p.annotation {
   font-size: 12px;
}
.sp div.matomeTxt p:last-child {
   margin-bottom: 0;
}
/* sns */
.sp .sns_Aria {
   width: 98%;
   margin: 1% 0 1% 1%;
}
.sp ul.sns_Btn li.snsLi {
   display: table-cell;
   padding-left: 0;
   background: #00c300;
   text-align: left;
}
.sp ul.sns_Btn li a {
   height: 40px;
   line-height: 40px;
}
.sp ul.sns_Btn li.snsLi span {
   display: block;
   position: relative;
}
.sp ul.sns_Btn li.snsLi span a {
   position: relative;
   z-index: 10;
}
#mtm000007.sp ul.sns_Btn li.snsLi a img {
   width: auto;
}
.sp ul.sns_Btn li.snsLi span:after {
   position: absolute;
   top: 50%;
   margin-top: -.6em;
   left: 48px;
   color: #fff;
   letter-spacing: 2px;
   content: "LINE";
   z-index: 1;
}
/* --- section contentsArea --- */
.sp section.contentsArea {
   width: 100%;
   margin: 0 auto 10%;
}
.sp section.contentsArea h2 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   padding: 2% 3%;
   font-size: 14px;
}
.sp section.contentsArea h2::before {
   width: 18px;
   height:18px;
   background:url(/static/mtm/000007/img/icon_movie.png) center no-repeat;
   background-size: 100% auto;
   margin-right: 2%;
}
.sp section.contentsArea h2 {
   -webkit-box-flex: 1;
   flex: 1;
}
.sp section.contentsArea h3 {
   margin-bottom: 5%;
}
.sp section.contentsArea .dramaWrap h3 {
   padding-left: 2%;
}
.sp section.contentsArea h4 {
   font-size: 13px;
   margin-bottom: 1%;
}
.sp section.contentsArea h5 {
   margin-bottom: 1%;
   font-size: 14px;
}
.sp section.contentsArea h5 span.num {
   font-size: 28px;
   margin-right: 2%;
}
.sp section.contentsArea p {
   margin-bottom: 5%;
}
.sp section.contentsArea p:last-child {
   margin-bottom: 0 !important;
} 
.sp .dramaWrap {
   padding: 3%;
   margin-bottom: 5%;
}
.sp p.dramaCap {
   margin-bottom:2%;
   background:url(/static/mtm/000007/img/snapshot.png) center no-repeat;
   -webkit-background-size: cover;
   background-size: cover;
}
.sp section.contentsArea .dramaWrap p,
.sp section.contentsArea .keyPoint p,
.sp section.contentsArea .subDetail p {
    line-height: 1.3;
    letter-spacing: 1px;
}
.sp section.contentsArea .dramaDetail {
   margin-bottom: 5%;
}
.sp section.contentsArea .keyPoint {
   padding: 4%;
   margin-bottom: 3%;
}
.sp section.contentsArea .description {
   line-height: 1.3;
   margin-top: 5%;
}
.sp section.contentsArea .subDetail {
    margin: 0 3% 5%;
    padding-bottom: 2%;
    padding-left: 2%;
    border-left: solid 5px;
}
/* civilwar */
.sp #civilwar.contentsArea .dramaWrap h3 {
   border-left: solid 4px #0b0168;
}
/* deadpool */
.sp #deadpool.contentsArea .dramaWrap h3 {
   border-left: solid 4px #bc0606;
}
/* afterword */
.sp #afterword.contentsArea {
    background: #f4f4f4 url(/static/mtm/000007/img/icon_baloon.png) 3% 10% no-repeat;
    -webkit-background-size: 10% auto;
    background-size: 10% auto;
    box-sizing: border-box;
    padding: 3%;
}
.sp #afterword.contentsArea h2 {
   margin-bottom: 1%;
   padding-left: 11%;
}
.sp #afterword.contentsArea h2::before {
   display: none;
}
.sp #afterword.contentsArea p {
   line-height: 1.3;
}
/* worklist */
.sp #worklist.contentsArea h2 {
   margin-bottom: 3%;
}
.sp #worklist.contentsArea ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   width: 94%;
   margin: 0 auto 5%;
   text-align: center;
}
.sp section.contentsArea .worklist li {
   width: 31%;
   margin: 0 1% 5% 1%;
   text-align: left;
}