/* Homepage */

#bread { padding: 20px 0; }


.header-home { background: url(../images/foundation/fv.jpg) no-repeat center bottom; background-size: cover; padding: 190px 0; position: relative;}
.header-home h2 { display: inline-block; font-size: 30px; font-family: 'Trajan Pro'; letter-spacing: 6px; }
.header-home h2 span { display: block; padding: 5px 0 0; font-size: 16px; border-top: 1px solid #fff; }
.header-home .cta{ position: absolute; right:35px; top:35px; text-align: center; font-weight: 500; z-index: 3; }
.topbtn { margin: 120px auto 120px;}
.lead{font-size: 25px;font-weight: 500;margin-bottom: 40px;line-height:1.7;}


/* object */
#object { background: #f4f7fa; padding: 120px 0; }
#object .intro { padding: 0 0 60px; }
#object .container .box { background: url(../images/foundation/pic_00.jpg?v=181214) no-repeat center top; padding: 160px 0 0; }
#object .container .box ol { width: 1000px; margin: 0 auto; background: #fff; padding: 45px 0 0; }
#object .container .box ol li { float: left; width: 50%; padding: 0 25px; }
#object .container .box ol li h4 { font-size: 20px; background: url(../images/foundation/bar.gif) no-repeat left center; margin: 0 0 30px; padding: 0 0 0 45px; }
#object .container .box ol li h4 span { margin: 0 10px 0 0; font-size: 26px; font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif; }
#object .container .box ol li p { width: 450px; margin: 0 0 50px; height: 70px; border-bottom: solid 1px #f4f7fa; }

/* example */
#example { padding: 120px 0;}
#example .row { padding: 55px 0 0; }
#example .row .col-md-3 h4 { font-size: 18px; font-family: 'Noto Serif JP', sans-serif; color: #fff; text-align: center; }
#example .row .col-md-3 h4 span { font-size: 24px; font-family: 'Trajan Pro'; display: inline-block; border-bottom: 1px solid #fff; margin: 0 0 5px; }
#example .row .col-md-3 h4 small { display: block; font-size: 18px; }
#example .row .col-md-3 { margin: 0 0 30px; padding: 80px 0; }
#example .row .e1 { background: url(../images/foundation/example_01.jpg) no-repeat center center; background-size: 88%; }
#example .row .e2 { background: url(../images/foundation/example_02.jpg) no-repeat center center; background-size: 88%; }
#example .row .e3 { background: url(../images/foundation/example_03.jpg) no-repeat center center; background-size: 88%; }
#example .row .e4 { background: url(../images/foundation/example_04.jpg) no-repeat center center; background-size: 88%; }
#example .row .e5 { background: url(../images/foundation/example_05.jpg) no-repeat center center; background-size: 88%; }
#example .row .e6 { background: url(../images/foundation/example_06.jpg) no-repeat center center; background-size: 88%; }
#example .row .e7 { background: url(../images/foundation/example_07.jpg) no-repeat center center; background-size: 88%; }
#example .row .e8 { background: url(../images/foundation/example_08.jpg) no-repeat center center; background-size: 88%; }
#example .row .e9 { background: url(../images/foundation/example_09.jpg) no-repeat center center; background-size: 88%; }
#example .row .e10 { background: url(../images/foundation/example_10.jpg) no-repeat center center; background-size: 88%; }
#example .row .e11 { background: url(../images/foundation/example_11.jpg) no-repeat center center; background-size: 88%; }
#example .row .e12 { background: url(../images/foundation/example_12.jpg) no-repeat center center; background-size: 88%; }

/* area */
#area { background: #f4f7fa; padding: 120px 0; }
#area .photo { padding: 50px 0 30px; }

/* company */
#company{position: relative; margin: 120px 0 0; padding-top: 60px;padding-bottom: 100px;}
#company .media-body { margin: 20px 0 0; }
#company .media-body p { padding: 10px 0 0; line-height: 200%;}
#company .media-body p span { display: block; line-height: 200%; padding: 40px 0 0; }
#company::before{position: absolute;content:'';top:0;right:0;width:73.4868%;bottom:145px;background-color: #d2dce6;z-index:-1;}
#company .media-left{margin-right:40px;}
#company .sub-title {font-size: 32px;margin-bottom: 25px;}
#company a.btn { width: 330px; margin: 0 auto -35px; }

/* service */
#service { padding: 0 0 70px; }
#service .sub-title{font-size: 32px;margin-bottom: 30px;}
#service .sub-title + p {margin-bottom:85px;}
#service .intro { padding: 0 0 50px; line-height: 200%; }
#service .about { height: 120px; line-height: 200%; }
.service-item{margin-bottom: 50px;}
.service-item-caption{padding:40px 30px 30px;}
.service-item-caption h4{font-weight: 500;font-size:20px;padding-left: 40px;margin-bottom: 30px;position: relative;}
.service-item-caption h4::before{position: absolute;content:'';width:28px;border-top:1px solid #005796;left:0;top:50%;}

/* magazine */
#magazine { background: url(../images/consulting/pic_09.jpg) no-repeat center center; background-size: cover; color: #fff; padding: 150px 0; }
#magazine h3 { font-size: 38px; font-family: 'Noto Serif JP', sans-serif; letter-spacing: 1px; }
#magazine h3 span { display: block; width: 350px; border-bottom: solid 2px #fff; font-size: 58px; font-family: 'Trajan Pro'; letter-spacing: 5px; line-height: 100%; margin: 0 0 10px; }
#magazine p { margin: 0 0 50px; }

@media (min-width:1200px){

}
@media (max-width:1199px){

#company .media-left{max-width:430px;}
#company .media-left{margin-right: 50px;}
#company::before{bottom:60px;}

/* object */
#object { background: #f4f7fa; padding: 80px 0; }
#object .intro { padding: 0 0 30px; }
#object .container .box ol { width: 880px; }
#object .container .box ol li p { width: 100%; }

/* example */
#example { padding: 80px 0;}
#example .row { padding: 30px 0 0; }
#example .row .col-md-3 { margin: 0 0 30px; padding: 68px 0; }
#example .row .col-md-3 h4 { font-size: 16px; }
#example .row .col-md-3 h4 span { font-size: 22px; }
#example .row .col-md-3 h4 small { font-size: 16px; }

/* area */
#area { padding: 80px 0; }

/* company */
#company{ margin: 80px 0; padding-top: 50px; padding-bottom: 100px;}
#company .media-body { margin: 20px 0 0; }
#company .media-body p { padding: 0; }
#company .media-body p span { padding: 20px 0 0; }
#company .media-left{margin-right:30px;}
#company .sub-title {font-size: 24px;margin-bottom: 25px;}
#company a.btn { margin: 0 auto -100px; }

/* magazine */
#magazine { padding: 80px 0; }
#magazine h3 { font-size: 24px; }
#magazine h3 span { width: 295px; font-size: 48px; }
#magazine p { font-size: 14px; margin: 0 0 50px; }

}

@media (max-width:991px){
#bread { padding: 20px 0 10px;}
.cta { width: 150px; height: auto; }

.service-item-caption{padding:30px 20px 20px;}
.topbtn { margin: 50px auto;}

#company .media-left, #recruit .media-left, #facebook .media-left{max-width:360px;margin-right: 30px;}

/* object */
#object { padding: 80px 0; }
#object .intro { padding: 0 0 30px; }
#object .container .box ol { width: 620px; padding: 10px 0 0;}
#object .container .box ol li h4 { font-size: 18px; margin: 20px 0 10px; padding: 0 0 0 45px; }
#object .container .box ol li h4 span { margin: 0 10px 0 0; font-size: 24px; }
#object .container .box ol li p { font-size: 14px; width: 100%; margin: 0;}

/* example */
#example .row { padding: 20px 0 0; }
#example .row .col-md-3 { margin: 0 0 20px; padding: 45px 0; }
#example .row .col-md-3 h4 { font-size: 14px; }
#example .row .col-md-3 h4 span { font-size: 18px; }
#example .row .col-md-3 h4 small { font-size: 14px; }

/* area */
#area { padding: 80px 0; }
#area img { width: 60%; }

/* company */
#company{ margin: 80px 0 0; padding-top: 50px; padding-bottom: 100px;}
#company .media-body { margin: 20px 0 0; }
#company .media-body p { font-size: 14px; padding: 0; }
#company .media-body p span { font-size: 14px; padding: 10px 0 0; }
#company::before{bottom:125px;}
#company .media-left{margin-right:30px;}
#company .sub-title {font-size: 24px;margin-bottom: 25px;}
#company a.btn { margin: 0 auto; }

/* service */
#service { padding: 0 0 20px; }
#service .intro { padding: 0 0 50px; line-height: 200%; text-align: left; }
#service h4 { margin: 0 0 20px; font-size: 18px; } 
#service .about { height: 100px; line-height: 170%; font-size: 14px; overflow: hidden; }

/* magazine */
#magazine { background-size: 100%; padding: 50px 0; }
#magazine h3 { font-size: 20px; font-family: 'Noto Serif JP', sans-serif; letter-spacing: 1px; }
#magazine h3 span { width: 255px; font-size: 40px; margin: 0 0 10px; }
#magazine p { margin: 0 0 30px; font-size: 14px; }

}
@media (max-width:767px){
.PC { display: none; }
.SP { display: block; }
.topbtn { margin: 3% auto 9%;}
#company .media, #recruit .media, #facebook .media{display:block;}
#company .media-left, #recruit .media-left, #facebook .media-left{margin-left: 0;margin-right: 0;margin-top:30px;width:auto;max-width:none;}

/* object */
#object { padding: 50px 0; }
#object .intro { padding: 0 0 30px; }
#object .container .box ol { width: 100%; padding: 10px 0 20px;}
#object .container .box ol li h4 { background: url(../images/foundation/bar.gif) no-repeat left 8px; font-size: 14px; height: 35px; margin: 20px 0 10px; padding: 0 0 0 35px; }
#object .container .box ol li h4 span { margin: 0 10px 0 0; font-size: 18px; }
#object .container .box ol li p { font-size: 14px; width: 100%; margin: 0; height: 80px; }

/* company */
#company{ margin: 0 auto; padding-top: 50px; padding-bottom: 100px;}
#company::before{ display: none; }
#company a.btn { margin: 0 auto; }

}
@media (max-width:576px){

.cta { display: none; }
.header-home { padding: 100px 0; }
.header-home h2 { font-size: 20px; }
.header-home h2 span { font-size: 14px; }
#service .sub-title, #company .sub-title, #careers .sub-title, #facebook .sub-title, #contact .sub-title, 
#event .sub-title{font-size: 22px;}
#service{padding-bottom: 0;}
#service .sub-title + p{margin-bottom: 40px;}
.service-item-caption h4{font-size: 18px;line-height:1.6;}

#company, #recruit, #facebook{padding-bottom:60px;}
#company::before, #recruit::before, #facebook::before{width:100%;bottom:0;}

/* object */
#object { padding: 40px 0; }
#object .intro { padding: 0 0 10px; }
#object .container .box ol { width: 100%; padding: 10px 0 20px;}
#object .container .box ol li { width: 100%; }
#object .container .box ol li:last-child { border-top: 1px solid #f4f7fa; }
#object .container .box ol li h4 { background: url(../images/foundation/bar.gif) no-repeat left 10px; font-size: 16px; height: inherit; margin: 20px 0 10px; padding: 0 0 0 35px; }
#object .container .box ol li h4 span { margin: 0 10px 0 0; font-size: 20px; }
#object .container .box ol li p { font-size: 14px; width: 100%; height: inherit; margin: 0; padding: 0 0 20px; }

/* example */
#example { padding: 50px 0;}
#example .row { margin: 0 auto; padding: 0 0; }
#example .row .col-md-3 { background-size: 94%; margin: 0 0 8px; padding: 14% 0; }
#example .row .col-md-3 h4 { font-size: 14px; }
#example .row .col-md-3 h4 span { font-size: 16px; margin: 0 0 5px; }
#example .row .col-md-3 h4 small { font-size: 14px; }

/* area */
#area { padding: 50px 0 40px; }
#area .photo { padding: 20px 0; }

/* company */
#company{ margin: 0; padding: 40px 0 0; }
#company a.btn { width: 260px; font-size: 14px; margin: 0 auto; }

/* service */
#service { padding: 80px 0 0; }

#service .intro { padding: 0 0 50px; line-height: 170%; }
#service .about { height: inherit; line-height: 170%; }
.service-item{margin-bottom: 50px;}
.service-item-caption{padding:6%;}

/* magazine */
#magazine { background: #f4f7fa; width: 94%; margin: 0 auto 30px; padding: 6% 0 8%; color: #000;}
#magazine h3 { font-size: 14px; text-align: center;}
#magazine h3 span { width: 170px; border-bottom: solid 2px #000; font-size: 24px; margin: 0 auto 10px; }
#magazine p { font-size: 13px; margin: 20px 0 15px; text-align: center;}
#magazine a.btn { display: block; width: 250px; margin: 0 auto; height: 46px;}
}