/* ====================================================

サービス紹介　中ページ共通CSS（index2.html／solution.html／旧デザインページを除く）

service/files/css/common.css

==================================================== */
h1 img {
    width: 10rem;
}

.container-fluid.plan {
    padding-bottom: 4rem;
    color: #fff;
    background: -moz-linear-gradient(83.98% 144.57% 135deg, rgba(240, 165, 90, 1) 0%, rgba(210, 135, 60, 1) 50%, rgba(205, 110, 50, 1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(240, 165, 90, 1) 0%, rgba(210, 135, 60, 1) 50%, rgba(205, 110, 50, 1) 100%);
    background: -webkit-gradient(linear, 83.98% 144.57%, 16.02% -44.57%, color-stop(0, rgba(240, 165, 90, 1)), color-stop(0.5, rgba(210, 135, 60, 1)), color-stop(1, rgba(205, 110, 50, 1)));
    background: -o-linear-gradient(135deg, rgba(240, 165, 90, 1) 0%, rgba(210, 135, 60, 1) 50%, rgba(205, 110, 50, 1) 100%);
    background: -ms-linear-gradient(135deg, rgba(240, 165, 90, 1) 0%, rgba(210, 135, 60, 1) 50%, rgba(205, 110, 50, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0A55A', endColorstr='#CD6E32' ,GradientType=0)";
    background: linear-gradient(-45deg, rgba(240, 165, 90, 1) 0%, rgba(210, 135, 60, 1) 50%, rgba(205, 110, 50, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#F0A55A', endColorstr='#CD6E32', GradientType=1);
}

.container-fluid.print {
    padding-bottom: 4rem;
    color: #fff;
    background: -moz-linear-gradient(83.98% 144.57% 135deg, rgba(90, 205, 175, 1) 0%, rgba(65, 170, 150, 1) 50%, rgba(50, 130, 130, 1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(90, 205, 175, 1) 0%, rgba(65, 170, 150, 1) 50%, rgba(50, 130, 130, 1) 100%);
    background: -webkit-gradient(linear, 83.98% 144.57%, 16.02% -44.57%, color-stop(0, rgba(90, 205, 175, 1)), color-stop(0.5, rgba(65, 170, 150, 1)), color-stop(1, rgba(50, 130, 130, 1)));
    background: -o-linear-gradient(135deg, rgba(90, 205, 175, 1) 0%, rgba(65, 170, 150, 1) 50%, rgba(50, 130, 130, 1) 100%);
    background: -ms-linear-gradient(135deg, rgba(90, 205, 175, 1) 0%, rgba(65, 170, 150, 1) 50%, rgba(50, 130, 130, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#5ACDAF', endColorstr='#328282' ,GradientType=0)";
    background: linear-gradient(-45deg, rgba(90, 205, 175, 1) 0%, rgba(65, 170, 150, 1) 50%, rgba(50, 130, 130, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5ACDAF', endColorstr='#328282', GradientType=1);
}

.container-fluid.plan p, .container-fluid.plan a, .container-fluid.print p, .container-fluid.print a {
    color: #fff;
}

.container-fluid.plan .detail {}

.container-fluid.plan .detail a, .container-fluid.plan .print a {
    width: 16rem;
    display: block;
}

.container-fluid.plan .detail a:hover, .container-fluid.print .detail a:hover {
    opacity: 0.7;
}

.container-fluid.plan .detail a img, .container-fluid.print .detail a img {
    width: 16.0rem;
}

.container-fluid.plan .frameborder, .container-fluid.print .frameborder {
    padding: 2rem 4rem;
    background-color: rgba(184, 90, 30, 0.6);
    border: solid 2px rgba(255, 255, 255, 0.8);
}

.container-fluid.print .frameborder {
    background-color: rgba(50, 128, 128, 0.6);
}

.container-fluid.plan .frameborder a, .container-fluid.print .frameborder a {
    font-size: 1.5rem;
}

.container-fluid.plan .frameborder a img, .container-fluid.print .frameborder a img {
    margin-left: 0.8rem;
}

.sub-ttl {
    font-weight: normal;
    font-size: 24px;
}

.bold {
    font-weight: bold;
}

/* サイト共通　汎用CSSの微調整 */
.font48 {
    line-height: 1.5em;
}


/* ----------------------------------------------------

 ttl部分　※背景画像はページごとにクラス分け。クラス命名規則：bg-【ページ名】

---------------------------------------------------- */
.ttl {
    padding-top: 200px !important;
    height: 420px;
}
h1.ttl.txt-wh {
	color: #fff;
}
.bg-planning {
    background: url(../img/planning/bg_planning.jpg);
    background-size: cover;
    background-position: center;
}
.bg-design {
    background: url(../img/design/bg_design.jpg);
    background-size: cover;
    background-position: center;
}
.bg-web {
    background: url(../img/web/bg_web.jpg);
    background-size: cover;
    background-position: center;
}
.bg-video {
    background: url(../img/video/bg_video.jpg);
    background-size: cover;
    background-position: center;
}
.bg-photo {
    background: url(../img/photo/bg_photo.jpg);
    background-size: cover;
    background-position: center;
}
.bg-promotion {
    background: url(../img/promotion/bg_promotion.jpg);
    background-size: cover;
    background-position: center;
}
.bg-printingservice {
    background: url(../img/printingservice/bg_printingservice.jpg);
    background-size: cover;
    background-position: center;
}


/* ----------------------------------------------------

 汎用クラス

---------------------------------------------------- */
.bg-gray {
    background: #f2f2f2;
    padding-bottom: 80px;
}

.bg-white {
    background: #fff;
}
.color_blue {
    font-weight: bold;
    color: #5f96c8;
}

.color_gray,
.font-color-gray {
    color: #5a5a5a;
}

.contact_us {
    background: #d7d7d7;
    color: #808080;
    padding: 0 8%;
}
.btn_contact:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.site-icon{
    width:16px;
    margin-left:8px;
    position: relative;
    top: -2px;
}
.left{
    float:left;
}
.right{
    float:right;
}
.m0{
    margin:0;
}
.bdr-1px {
	border: 1px solid #808080;
}

.contact-message{
    font-size: 1.6rem;
    }
@media (max-width: 600px) {
    .contact-message{
        font-size: 1.5rem;
    }
}


/* ----------------------------------------------------

 box

---------------------------------------------------- */
.border_blue {
    height: 100%;
    border-left: 6px solid #8eccd9;
    border-right: 6px solid #89b1d6;
    padding: 0px;
}

.border_blue:before, .border_blue:after {
    content: "";
    display: block;
    height: 6px;
    width: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#8eccd9), to(#89b1d6));
    background: -moz-linear-gradient(left, #8eccd9, #89b1d6);
    background: linear-gradient(left, #8eccd9, #89b1d6);
}
.box01 {
    padding: 0 80px 0 16px;
}
.box02 {
    padding: 64px 4%;
}
.boxtitle {
    font-size: 20px;
    font-weight: bold;
    color: #5f96c8;
    margin: 0;
    line-height: 1.6;
    text-align: center
}
.ml20none {
    margin-left: 20px;
}

/*---------------contact_us-------------------*/
.flax-container01{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    font-size:16px;
    padding: 40px 8%;
    flex-direction: row;
}
.deco02{
    border: solid 1px #808080;
    overflow:hidden;
    width:220px;
    background-color: #fff;
    padding: 4px 16px;
}
.deco02 span{
    font-size:1.4rem;
    color:#5a5a5a;
}

/*---------------bnrBox-------------------*/
/*各バナー*/
.bnrBox {
	margin: 30px auto;
}

/*graphicTopicsを含む複数バナーがある場合*/
.bnrAreaBox {
	width: 551px;
	margin: 0 auto;
}
@media (max-width: 600px) {
	.bnrAreaBox {
		width: 100%;
    }
}


/*---------------graphicspBox-------------------*/
.pointBox-out .graphicspBox {
	width: auto;
}
.graphicspBox {
	margin: 40px auto;
}

/*---------------pointBox-------------------*/
.pointBox-out {
	background: #f2f2f2;
	overflow: hidden;
}
.pointBox {
    margin: 40px auto;
    padding: 16px 0;
	width: 50%;
	border: 2px solid #1464af;
	background: #fff;
}
.pointBox .row {
	display: flex;
	align-items: center;
}
.pointBox a {
	color: #1464af;

}
.pointBox img {
	display: block;
	    max-width: 100%;
	    height: auto;
			margin: 0 auto;
}

.pointBox .campBnrTxt {
		text-align: center;
		text-decoration: underline;
}
.pointBox .campBnrTxt p {
		color: #1464af;
		font-size: 1.6rem;
}
.pointBox .campBnrTxt .btn-gradient-radius {
	display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #1464af 0%, #2b9ed8 100%);
}
@media (max-width: 1199px) {
	.pointBox {
			width: 60%;
    }
    .carousel-caption {
        margin-left: 0;
    }

}

/*バナー2種カラム*/
.pointBox-out {
	background: #e3e3e3;
}
.pointBox {
	width: auto;
	padding: 16px;
	}
.pointBox .campBnrTxt {
	padding-left: 0;
}
.pointBox .campBnrTxt p {
	font-size: 1.3rem;
	line-height: 1.6;
	color: #1e1e1e;
}
.pointBox a {
	color: #1e1e1e;
}
.pointBox.pp-design {
	border:2px solid #e48100;
}
.pointBox.pp-design .campBnrTxt .btn-gradient-radius {
	background-image: linear-gradient(45deg, #ff9000 0%, #ffb200 100%);
}
.pointBox.fsc-paper {
	border:2px solid #439d29;
}
.pointBox.fsc-paper .campBnrTxt .btn-gradient-radius {
	background-image: linear-gradient(45deg, #439d29 0%, #9bd02c 100%);
}
@media (max-width: 767px) {
	.pointBox.pp-design {
		margin-top: 0;
	}
}


/*---------------icon-------------------*/
.icon03{
    width: 8px;
    position: relative;
    top: 8px;
}


/* ----------------------------------------------------

 Bootstrap sm	768px以上、992未満

---------------------------------------------------- */
@media (min-width: 768px) {
    h1.ttl {
        font-size: 38px;
    }

    .sub-ttl {
        font-size: 24px;
    }

    .em8 {
        line-height: 8em;
    }

    .font48 {
        font-size: 35px;
    }

    br {
        display: block;
    }

    h1.ttl {
        padding: 46px 0;
    }

    .ttl {
        padding-top: 200px !important;
        height: 420px;
    }

    .text-center-left {
        text-align: center;
    }
    .flax-container02 {
        flex-direction: column;
    }
    .sp-m{
        margin: 16px 0;
        text-align: center;
    }
}


/* ----------------------------------------------------

 Bootstrap md	992px以上、1200未満

---------------------------------------------------- */
@media (min-width: 992px) {
    h1.ttl {
        font-size: 38px;
    }

    .col-mt-12 {
        margin-top: 0px;
    }

    .em8 {
        line-height: 8em;
    }

    .font48 {
        font-size: 48px;
    }

    h1.ttl {
        padding: 46px 0;
    }

    .ttl {
        padding-top: 200px !important;
        height: 420px;
    }

    .text-center-left {
        text-align: center;
    }
}


/* ----------------------------------------------------

 Bootstrap lg	1200px以上

---------------------------------------------------- */
@media (min-width: 1200px) {
    h1.ttl {
        font-size: 38px;
    }
    .col-mt-12 {
        margin-top: 0px;
    }
    .em8 {
        line-height: 8em;
    }
    .font48 {
        font-size: 48px;
    }
    h1.ttl {
        padding: 46px 0;
    }
    .ttl {
        padding-top: 200px !important;
        height: 420px;
    }
    .text-center-left {
        text-align: center;
    }
    .flax-container01 {
        flex-direction: row;
    }

}


/* ----------------------------------------------------

 Bootstrap xs	768px未満（767px以下）

---------------------------------------------------- */
@media (max-width:767px){
    .box01 {
        padding: 0 16px;
    }
    .box02 {
        padding: 8px 0px;
    }
    .boxtitle {
        font-size: 20px;
        font-weight: bold;
        color: #5f96c8;
        margin-left: 0;
        line-height: 1.6;
        text-align: center
    }
    .ml20none {
        margin-left: 0px;
    }
    .sp-mt16{
        margin-top:16px;
    }
	.sub-ttl {
    font-size: 19px;
	}

	h1.ttl {
    font-size: 24px;
    padding: 75px 0;
	}
	.ttl {
    padding: 75px 0 !important;
    height: auto;
	}
	.text-center-left {
    text-align: left;
	}
	.col-mt-12 {
    margin-top: 20px;
	}
	.em8 {
    line-height: 3em;
	}
	.font48 {
    font-size: 28px;
    }
    .flax-container02 {
        flex-direction: column;
    }
    .sp-m{
        margin: 16px 0;
        text-align: center;
    }
}