/* CSS LIST--------------

[ COMMON-PAGES.CSS ]
中ページの基準CSS

>FIRST-VIEW
>MAIN VISUAL & TITLE
>BREADCRUMB
>SCROLL ICON
>CONTENTS


-----------------------*/
/* FIRST-VIEW */
#fisdt-view {height: 100vh;margin-top: -110px;position: relative;}
@media screen and (max-width: 999px) {
    #fisdt-view {height:calc(100vw * 0.6 + 110px);}
}

/* MAIN VISUAL & TITLE */
#page-main-visual {margin-top: 15px;padding: 0 50px;height: 100%;display: table;    width: 100%;    margin-bottom: 80px;}
#page-main-visual .ttl-erea {display: table-cell;vertical-align: middle;width: 100%;padding-bottom: 20px;    padding-top: 110px;}
#page-main-visual .ttl-erea h2 { font-size: 66px;  display: block; margin-top: -20px;font-weight: 700;}
#page-main-visual .img-erea { width: 60vw; height: calc(100vh - 207px); background: #eee; margin-top: 110px;}

@media screen and (max-width: 1200px) { #page-main-visual .img-erea { width: 55vw; }}

@media screen and (max-width: 999px) {
    #page-main-visual {background: #eee;padding: 0 30px; margin-bottom: 0; height: 350px;}
    #page-main-visual .ttl-erea {width: 100%;padding-bottom: 0;padding-top: 75px;}
    #page-main-visual .img-erea{display: none;}}

@media screen and (max-width: 767px ) { 
    #page-main-visual .ttl-erea h2 {font-size:45px;    margin-top: -11px;}}

/* VISUAL-NONE-TYPE (CONTACT・NEWS) */
#page-main-visual.visual-none-type {border-bottom: 1px solid #F74F4C;background: none;}
#page-main-visual.visual-none-type .ttl-erea { padding-top: 136px; padding-bottom: 49px;}

@media screen and (max-width: 999px) {
    #page-main-visual.visual-none-type {height: 200px;}
    #page-main-visual.visual-none-type .ttl-erea { padding-top: 110px; padding-bottom: 49px;}}

@media screen and (max-width: 767px) {
    #page-main-visual.visual-none-type {height: 200px;}
    #page-main-visual.visual-none-type .ttl-erea {padding-top: 81px;  padding-bottom: 34px;}}

/* VISUAL-LINE-TYPE (WORKS詳細,ページネーション付き) */
.visual-line-type {margin-top: 110px;background: #F74F4C;color: #fff;text-align: center;position: relative;padding: 1.5em 0;}
.visual-line-type h2 {margin: 0;font-size: 26px;}
.visual-line-type a.page-nation-p {display: inline-block;position: absolute;top: 20px;left: 5px;}
.visual-line-type a.page-nation-p p:before {content: "";width:19px;height: 38px;background: url(../img/btn-prev-wh.svg)0 0 no-repeat;position: absolute; top: 2px;left: 53px;}
.visual-line-type a.page-nation-n {display: inline-block;position: absolute;top: 20px;right: 5px;}
.visual-line-type a.page-nation-n p:before {content: "";width:19px;height: 38px;background: url(../img/btn-next-wh.svg)0 0 no-repeat;position: absolute; top: 2px;right: 53px;}
.visual-line-type a.page-nation-p:hover {left: 0;}
.visual-line-type a.page-nation-n:hover {right: 0;}
@media screen and (max-width: 999px) {
    .visual-line-type {margin-top: 83px;padding: 1em 0;}
    .visual-line-type h2{font-size: 20px;}
    .visual-line-type a.page-nation-p p:before {top: -10px;left: 25px;}
    .visual-line-type a.page-nation-n {}
    .visual-line-type a.page-nation-n p:before {top: -10px;right: 25px;}
}

/* BREADCRUMB */
ul#breadcrumb {padding-left: 0;    display: inline-block;}
ul#breadcrumb li {float: left;}
ul#breadcrumb li a { color:#F74F4C; font-size: 13px;margin-right: 0.5em;}
ul#breadcrumb li:after { content:"\f105"; font-family: FontAwesome;font-size: 12px;margin-right:5px;  }
ul#breadcrumb li:last-child:after { content: "";}
@media screen and (max-width: 767px ) {
    ul#breadcrumb li a {font-size: 11px;}}

/* SCROLL ICON */
#scrool-icon { position: absolute; bottom: 32px;  left: calc(50% - 40px);}
#scrool-icon a p {color:#F74F4C; margin: 0;position: relative;padding: 3px 8px 3px 10px;font-weight: 700;}
#scrool-icon a p:after {content: ""; height: 32px; width: 1px; background: #F74F4C; position: absolute; bottom: -32px; left: 50%;}
#scrool-icon a:hover p {-webkit-transition: all .4s; transition: all .4s;background: #F74F4C;color: #fff;}
@media screen and (max-width: 999px) {
    #scrool-icon {display: none;}}

/* CONTENTS */
section.Ctn-wrap {padding: 0 13px;}
section.Ctn-wrap-gray {background: #F8F5F5;}
section.Ctn-wrap article.Ctn/*幅700*/{padding-top: 64px;padding-bottom: 64px;width: 700px;margin: 0 auto;}
section.Ctn-wrap article.Ctn-wide/*幅広の場合はBootstrap使用*/{width:inherit;padding-left: 30px;padding-right: 30px;}
section.Ctn-wrap article.Ctn-lg {/* BigSize */padding-top: 95px;padding-bottom: 130px;padding-left: 15px;padding-right: 15px;}
section.Ctn-wrap article.Ctn h2 {margin-top: 0;font-weight: 700;text-align: center;font-size: 23px;position: relative;margin-bottom: 106px;}
section.Ctn-wrap article.Ctn h2:after {content: "";background: #F74F4C; width: 1px; height: 32px;position: absolute;bottom: -40px;left: 50%;} 
@media (max-width: 1170px) {
    section.Ctn-wrap article.Ctn-wide {width: 100%; max-width: 1000px;padding-left: 20px;}
}
@media (max-width: 767px) {
    section.Ctn-wrap {padding: 0 20px;}
    section.Ctn-wrap article.Ctn h2 {margin-bottom: 72px;}
    section.Ctn-wrap article.Ctn {width: 100%; max-width: 700px;    padding-bottom: 75px;}
}

/* 3並び 実績部分 */   
.container .works {}
.container .works ul {}

/* height 追加前 20170913 富吉
.container .works ul a li {padding-left: 10px; padding-right: 10px;margin-bottom: 24px;padding-bottom: 16px;}
 */

.container .works ul a li {padding-left: 10px; padding-right: 10px;margin-bottom: 24px;padding-bottom: 16px; height:330px;}
.container .works ul a li figure { width: 100%;    height: calc(30.333333333vw / 1.823677); overflow: hidden;position: relative;}
.container .works ul a li figure img {width: 100%; }
.container .works ul a li .box--info{height: 40px;}
.container .works ul a li .box--info p.box--category {color: #fff; background: #787878; padding: 1px 20px;text-align: center;display: inline-block; font-size: 12px; font-weight: 700;letter-spacing: 0.2em;margin-top: 8px;float: left;}
.container .works ul a li .box--info p.box--date {float: right;margin-top: 8px;color:#787878;font-weight: 700;}
.container .works ul a li h3 {color: #131312;font-size: 14px;margin-top:4px;font-weight: 700;}
.container .works ul a li h3:hover {text-decoration: underline;color: #F74F4C;}
figure img {	-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
figure:hover img {-webkit-transform: scale(1.3);transform: scale(1.3);}
@media (max-width: 1199px) {.container .works ul a li figure {height: calc(26.333333333vw / 1.823677);}  }
@media (max-width: 991px) {.container .works ul a li figure {  height:calc(46vw / 1.823677);}  }
@media (max-width: 767px) {
    .container .works ul a li figure { height: auto;}  
    .container .works ul a li { border-bottom: 1px dotted #999999; height: auto;}
    .container .works ul a:last-child li {border: none;}
}

/*2並び　実績部分*/
article.two-boxes {color: #131312; font-size: 13px;}
article.two-boxes ul:after {content: "";display: block;clear: both;} {}
article.two-boxes ul li {width: calc(50% - 9px); float: left;margin-top: 32px;margin-right: 18px;}
article.two-boxes ul li:nth-child(even) {margin-right: 0;}
article.two-boxes ul li img {width: 100%;}
@media (max-width: 767px){
    article.two-boxes ul li {width: 100%; float: left;margin-top: 16px;margin-right:0;}
    
}

/* DL TABLE */
section.Ctn-wrap article dl {border-top: 1px dotted #BBBBBB;padding: 1.3em 0.3em;margin-bottom: 0; }
section.Ctn-wrap article dl:last-child { border-bottom: 1px dotted #BBBBBB;}
section.Ctn-wrap article dl dt {width: 20%;float: left;font-weight: normal;}
section.Ctn-wrap article dl dd {padding-left: 20%;}
@media (max-width: 767px) {
    section.Ctn-wrap article dl {padding: 0.7em 0.3em; }
    section.Ctn-wrap article dl dt {width: 100%;margin-bottom: 0;color: #888888;font-weight: 700;}
    section.Ctn-wrap article dl dd {padding-left: 0;}
}