@charset "UTF-8";
/*-------------------------------
���ʐݒ�
--------------------------------*/
#mtm000006 a:hover {
   text-decoration: underline;
}
#mtm000006 .sns_Aria a:hover {
   text-decoration: none;
}
#globalNavi.naviFixed {
   display: none;
}
#mtm000006 .container {
   width: 100%;
   margin: 0 auto 100px;
   font-size: 16px;
}
#mtm000006.sp .container {
   width: 100%;
   margin: 0 auto;
   font-size: 100%;
}
#mtm000006.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;
}
h1.head {
   color: #ff5e80;
}
div.matomeTxt {
   border: solid 4px #ffe9ee;
   line-height: 1.5em;
}
.dramaWrap {
   background-color: #ffe9ee;
}
section.contentsArea h4 {
   color: #ff5e80;
}
section.contentsArea h4 span {
   display: inlne-block;
   padding-right: 20px;
   background-color: #fff;
}
section.contentsArea .subDetail {
   background-color: #fff;
}
/* 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/000006/img/twIcon.png) no-repeat 0 center;
   background-size: 34px;
}
ul.sns_Btn li.snsFb {
   background: #3b5999 url(/static/mtm/000006/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;
}
/* .worklist */
section.contentsArea h2.worklistTtl {
   background-color: #ff5e80;
   color: #fff;
   font-weight: normal;
}
section.contentsArea h2.worklistTtl::before {
   display: inline-block;
   vertical-align: middle;
   content: "";
}
section.contentsArea h2.worklistTtl span {
   color: #fff;
   vertical-align: middle;
   line-height: 1;
}
/*----------------------------------------------
  pc
----------------------------------------------*/
/* --- section recomend --- */
.pc .matome {
   position: relative;
   margin-bottom: 35px;
}
.pc h1.head {
   min-height: 160px;
   padding-left: 310px;
   background: url(/static/mtm/000006/img/tag.jpg) no-repeat 0 0;
   font-size: 32px;
}
.pc section.recomend {
   width: 970px;
   margin: 0 auto 40px;
   padding-top: 20px;
   padding-bottom: 10px;
}
.pc div.matomeTxt {
   padding: 30px 20px 30px;
}
.pc div.matomeTxt p:first-child {
   margin-bottom: 12px;
}
/*sns*/
.pc .sns_Aria {
   position: absolute;
   right: 0;
   bottom: 10px;
   width: 230px;
}
.pc ul.sns_Btn li.snsLi {
   display: none;
}
.pc ul.sns_Btn li a {
   height: 40px;
   line-height: 40px;
}
/* --- section contentsArea --- */
.pc .spImg {
   display: none;
}
.pc section.contentsArea {
   width: 970px;
   margin: 0 auto 30px;
}
.pc section.contentsArea h2 {
   margin-bottom: -20px;
}
.pc section.contentsArea h2 .disnon {
   display: none;
}
.pc section.contentsArea h3 {
   margin-bottom: 16px;
   font-size: 30px;
}
.pc section.contentsArea h4 {
   position: relative;
   margin-bottom: 15px;
   background: url(/static/mtm/000006/img/line.png) repeat-x 0 50%;
   font-size: 22px;
   font-weight: normal;
}
section.contentsArea h4::after {
   display: block;
   position: absolute;
   top: 50%;
   right: -10px;
   width: 46px;
   height: 31px;
   margin-top: -15px;
   padding-left: 15px;
   background: url(/static/mtm/000006/img/bg_heart.png) right top no-repeat;
   content: "";
   -webkit-transform-origin: 50% 0;
      -moz-transform-origin: 50% 0;
       -ms-transform-origin: 50% 0;
        -o-transform-origin: 50% 0;
           transform-origin: 50% 0;
   -webkit-animation: kurun 6s linear 1s infinite;
      -moz-animation: kurun 6s linear 1s infinite;
        -o-animation: kurun 6s linear 1s infinite;
           animation: kurun 6s linear 1s infinite;

   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
}
.pc section.contentsArea .dramaWrap {
   margin-bottom: 35px;
   padding: 20px;
}
.pc section.contentsArea .drama {
   display: -webkit-box;
   display:         flex;
   display: -webkit-flex;
   margin-bottom: 20px;
   letter-spacing: -.40em;

   -webkit-box-pack: justify;
           justify-content: space-around;
   -webkit-justify-content: space-around;
   -webkit-align-items: center;
           align-items: center;
}
.pc section.contentsArea .dramaCap {
   display: inline-block;
   width: 460px;
   background: url(/static/mtm/000006/img/snapshot.png) center;
   letter-spacing: normal;
}
.pc section.contentsArea .dramaCap img {
   vertical-align: bottom;
}
.pc section.contentsArea .dramaDetail {
   display: inline-block;
   width: 445px;
   padding: 0 0 0 25px;
   vertical-align: top;
   letter-spacing: normal;
}
.pc section.contentsArea .dramaDetail p {
   line-height: 1.75;
}

.pc section.contentsArea .subDetail p {
   line-height: 1.5;
}
.pc section.contentsArea .subDetail {
   padding: 20px 30px 24px 20px;
}
/* worklist */
.pc section.contentsArea h2.worklistTtl {
   margin-bottom: 20px;
   padding: 10px;
   font-size: 22px;
}
.pc section.contentsArea h2.worklistTtl::before {
   width: 46px;
   height: 31px;
   margin-right: 10px;
   background: url(/static/mtm/000006/img/icon_heart.png) center;
}
.pc section.contentsArea .worklist {
   overflow: hidden;
   margin-left: -10px;
   letter-spacing: -.40em;
}
.pc section.contentsArea .worklist li {
   display: inline-block;
   width: 187px;
   margin-bottom: 40px;
   margin-left: 9px;
   font-size: 14px;
   text-align: left;
   vertical-align: top;
   letter-spacing: normal;
}
.pc section.contentsArea .worklist li img {
   box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .2);
}
.pc section.contentsArea .worklist li span {
   display: block;
   padding: 2% 0;
   font-size: 14px;
   text-align: center;
}
.pc section.copyright {
   width: 970px;
   margin: 30px auto;
   color: #727272;
   font-size: 12px;
}
/*----------------------------------------------
  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/000006/img/tag_sp.jpg) no-repeat center bottom;
   -webkit-background-size: 94% auto;
           background-size: 94% auto;
   content: "";
}
.sp div.matomeTxt {
   margin-bottom: 5%;
   padding: 3%;
}
.sp div.matomeTxt p:first-child {
   margin-bottom: 3%;
}
/* 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;
}
#mtm000006.sp ul.sns_Btn li.snsLi a img {
   width: auto;
}
.sp ul.sns_Btn li.snsLi span:after {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 48px;
   margin-top: -.6em;
   color: #fff;
   letter-spacing: 2px;
   content: "LINE";
}
/* --- section contentsArea --- */
.sp .pcImg {
   display: none;
}
.sp section.contentsArea {
   width: 100%;
   margin: 0 auto 10%;
}
.sp section.contentsArea h2 {
   /* margin-bottom: -2%; */
   padding-left: 1%;
}
.sp section.contentsArea h2 {
   color: #ff5e80;
   line-height: 2em;
}
.sp section.contentsArea h2 .disnon span {
   display: inline-block;
   width: 11vw;
   padding-left: 5vw;
   background: url(/static/mtm/000006/img/bg_num.png) no-repeat 0 0;
   background-size: contain;
   color: #fff;
   font-size: 4vw;
   font-weight: normal;
}
.sp section.contentsArea h2:nth-of-type(10) .disnon span {
   padding-right: 2vw;
   padding-left: 2vw;
}
.sp section.contentsArea h2 img.spImg {
   width: 168px !important;
}
.sp section.contentsArea h3 {
   margin-bottom: 5%;
}
.sp section.contentsArea h4 {
   position: relative;
   margin-bottom: 3%;
   background: url(/static/mtm/000006/img/line.png) repeat-x 0 50%;
   background-size: 361px auto;
   font-size: 1rem;
}
.sp section.contentsArea h4 span {
   padding-right: 3%;
}
.sp section.contentsArea h4::after {
   display: block;
   position: absolute;
   top: 50%;
   right: -1%;
   width: 26px;
   height: 18px;
   margin-top: -9px;
   padding-left: 3%;
   background: url(/static/mtm/000006/img/bg_heart.png) right top no-repeat;
   background-size: auto 100%;
   content: "";
}
.sp .dramaWrap {
   margin-bottom: 3%;
   padding: 3%;
}
.sp p.dramaCap {
   margin-bottom: 2%;
   background: url(/static/mtm/000006/img/snapshot.png) center no-repeat;
   -webkit-background-size: cover;
           background-size: cover;
}
.sp section.contentsArea .dramaDetail p,
.sp section.contentsArea .subDetail p {
   line-height: 1.3;
}
.sp section.contentsArea .dramaDetail {
   margin-bottom: 5%;
}
.sp section.contentsArea .subDetail {
   padding: 4%;
}
/* worklist */
.sp section.contentsArea h2.worklistTtl {
   margin-bottom: 3%;
   padding: 2% 0 2% 3%;
}
.sp section.contentsArea h2.worklistTtl::before {
   width: 25px;
   height: 17px;
   margin-right: 2%;
   background: url(/static/mtm/000006/img/icon_heart.png) center no-repeat;
   background-size: 100% auto;
}
.sp section.contentsArea .worklist {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display:         flex;
   width: 94%;
   margin: 0 auto 5%;
   text-align: center;

   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
           justify-content: space-between;
   box-lines: multiple;
   flex-wrap: wrap;
}
.sp section.contentsArea .worklist li {
   width: 32%;
   margin-bottom: 5%;
   text-align: left;
}
.sp section.contentsArea .worklist li figure {
   margin-bottom: 5%;
}

@keyframes "kurun"{0%{transform:rotate(-278deg);}20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0deg);}}@-moz-keyframes "kurun"{0%{-moz-transform:rotate(-278deg);}20%{-moz-transform:rotate(15deg);}40%{-moz-transform:rotate(-10deg);}60%{-moz-transform:rotate(5deg);}80%{-moz-transform:rotate(-5deg);}100%{-moz-transform:rotate(0deg);}}@-webkit-keyframes "kurun"{0%{-webkit-transform:rotate(-278deg);}20%{-webkit-transform:rotate(15deg);}40%{-webkit-transform:rotate(-10deg);}60%{-webkit-transform:rotate(5deg);}80%{-webkit-transform:rotate(-5deg);}100%{-webkit-transform:rotate(0deg);}}@-o-keyframes kurun{0% { -o-transform:rotate(-278deg)}20%{-o-transform:rotate(15deg)}40%{-o-transform:rotate(-10deg)}60%{-o-transform:rotate(5deg)}80%{-o-transform:rotate(-5deg)}100%{-o-transform:rotate(0deg)}} @-ms-keyframes kurun{0% { -ms-transform:rotate(-278deg)}20%{-ms-transform:rotate(15deg)}40%{-ms-transform:rotate(-10deg)}60%{-ms-transform:rotate(5deg)}80%{-ms-transform:rotate(-5deg)}100%{-ms-transform:rotate(0deg)}
