@charset "utf-8";

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

WORKS一覧ページのCSS

--中ページ共通のCSSに追記分のみ

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


/* MAIN VISUAL & TITLE */
#page-main-visual .img-erea {background: url(../img/page-main-image.jpg)0 0 no-repeat; background-size: cover;}
@media screen and (max-width: 999px) {
    #page-main-visual {background: url(../img/page-main-image-sp.jpg)0 0 no-repeat; background-size: cover;}}

/* 境界線　*/
#first-block {border-top:1px dotted rgba(247, 79, 76, 0.41);}


/* CLIENTS */
.clients li {color: #131312;font-size: 13px;}
#clients-wrap,#movie-list-wrap {padding-top: 50px;padding-bottom: 50px;}




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

実績詳細ページのCSS

--中ページ共通のCSSに追記分のみ

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

/* 全体、タイトル部 */
section.Ctn-wrap article.Ctn-works-detail {padding-top:20px;}
section.Ctn-wrap article.Ctn-subwide {width: 1000px;}
@media (max-width: 1170px) {section.Ctn-wrap article.Ctn-subwide {width: 100%; max-width: 1000px;padding-right: 15px;padding-left: 15px;}}
h3.works--name {text-align: center;font-size: 28px;color:#131312;padding-bottom:45px;}
h3.works--name span {display: block;font-size:16px;margin-bottom: 8px;}
@media (max-width: 767px){
    section.Ctn-wrap article.Ctn-works-detail {padding-top:5px;}
    h3.works--name {font-size: 18px;text-align: left;padding-bottom: 15px;}
    h3.works--name span {font-size: 14px;text-align: left;}
}

/*動画とコメント部*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
p.works--comment {margin-top: 8px;}
@media (max-width: 767px) {p.works--comment {font-size: 13px;line-height: 175%;}}

/* 実績の情報部分 */
section.Ctn-wrap article div.works--info dl {border: none;}
section.Ctn-wrap article div.works--info dl dt {letter-spacing: 0.15em; width: 100%; font-weight: 700;font-size: 17px;color:#F74F4C;position: relative;padding-left: 26px;}
section.Ctn-wrap article.Ctn{padding-bottom: 30px;padding-top: 15px;}
section.Ctn-wrap article div.works--info dl dt:before {content: "";height: 2px;width:21px;background:#F74F4C;position: absolute;left: 0;top: 43%;}
section.Ctn-wrap article div.works--info dl dd {padding-left: 0;}
section.Ctn-wrap article div.works--info dl.works--info--category dd span {font-size: 12px; display: inline-block; width:auto;min-width: 60px; text-align: center;color: #fff; background:#787878;padding: 4px 15px;margin-right: 8px;line-height: 100%; }
section.Ctn-wrap article div.works--info dl.works--info--credit dd {}
@media (max-width: 767px) {
    section.Ctn-wrap article div.works--info dl {padding: 0.7em 0.3em; }
    section.Ctn-wrap article div.works--info dl dt {width: 100%;font-weight: 700;}
    section.Ctn-wrap article div.works--info dl dd {padding-left: 0;}}

/*ページネーション部*/
section.Ctn-wrap article.page-nation {position: relative;margin-top: 24px;margin-bottom: 0;padding-bottom: 40px; }
section.Ctn-wrap article.page-nation a.basicbtn {width: 346px;padding: 8px;text-align: center;letter-spacing: 0.2em;position: absolute; left: calc(50% - 173px); top: 20px;}
section.Ctn-wrap article.page-nation a.basicbtn i {margin-left: 8px;}
@media (max-width: 767px) {
    section.Ctn-wrap article.page-nation {left: 0;padding-left: 15px;    height: 120px;}
    section.Ctn-wrap article.page-nation a.basicbtn { width: calc(100% - 30px); left: 15px; top: 70px;  right: 15px;padding-top:12px;padding-bottom: 12px;}
}

section.Ctn-wrap article.page-nation a.page-nation-p {display: inline-block;position: absolute;top: 20px;left:0;}
section.Ctn-wrap article.page-nation a.page-nation-p p {color:#F74F4C;padding-left: 30px;padding-top: 3px; font-size: 18px;font-weight: 700; }
section.Ctn-wrap article.page-nation a.page-nation-p:before {content: "";width:19px;height: 38px;background: url(../img/btn-prev.svg)0 0 no-repeat;position: absolute; top: 0;left: 0;}
section.Ctn-wrap article.page-nation a.page-nation-n {display: inline-block;position: absolute;}
section.Ctn-wrap article.page-nation a.page-nation-n p {color:#F74F4C;padding-right: 30px;padding-top: 3px; font-size: 18px;font-weight: 700; }
section.Ctn-wrap article.page-nation a.page-nation-n {display: inline-block;position: absolute;top: 20px;right:0;}
section.Ctn-wrap article.page-nation a.page-nation-n:before {content: "";width:19px;height: 38px;background: url(../img/btn-next.svg)0 0 no-repeat;position: absolute; top: 0;right: 0;}
section.Ctn-wrap article.page-nation a.page-nation-p:hover {left:-5px;}
section.Ctn-wrap article.page-nation a.page-nation-n:hover {right: -5px;}
@media (max-width: 767px) {
    section.Ctn-wrap article.page-nation a.page-nation-p {border: 1px solid #F74F4C;top: 0;left: 15px;padding: 10px;display: block;width: 45%;}
    section.Ctn-wrap article.page-nation a.page-nation-p p {font-size: 15px;padding-top: 7px;line-height: 1;}
    section.Ctn-wrap article.page-nation a.page-nation-p:before {width: 20px;height: 60px; background: url(../img/btn-prev.svg)10px 6px no-repeat;}
    section.Ctn-wrap article.page-nation a.page-nation-n {text-align: right; border: 1px solid #F74F4C;top: 0;right: 15px;padding: 10px;display: block;width: 45%;}
    section.Ctn-wrap article.page-nation a.page-nation-n p {font-size: 15px;padding-top: 7px;line-height: 1;}
    section.Ctn-wrap article.page-nation a.page-nation-n:before {background: none;}
    section.Ctn-wrap article.page-nation a.page-nation-n:after {content: ""; width: 20px;height: 60px; background: url(../img/btn-next.svg)-10px 5px no-repeat;position: absolute; top: 0;right: 0;}
    section.Ctn-wrap article.page-nation a.page-nation-p:hover {left: 10px;}
    section.Ctn-wrap article.page-nation a.page-nation-n:hover {right: 10px;}
}