@charset "utf-8";

/* ===========================================================================
    technology
=========================================================================== */
.keyvisual { margin-bottom:0; }

/* mainvisual */
.main .mainvisual { background:url(../img/img-mainvisual.jpg) 100% 0 / auto 100% no-repeat; position:relative; margin:0 -20px; z-index:2; }
.main .mainvisual img { display:none; width:100%; }
.main .mainvisual div { background-image:linear-gradient(-25deg, rgba(57,111,185,0.9) 70%, rgba(57,111,185,0) 70.2%, rgba(57,111,185,0) 100%); background-image:-webkit-linear-gradient(-25deg, rgba(57,111,185,0.9) 70%, rgba(57,111,185,0) 70.2%, rgba(57,111,185,0) 100%); background-image:-moz-linear-gradient(-25deg, rgba(57,111,185,0.9) 70%, rgba(57,111,185,0) 70.2%, rgba(57,111,185,0) 100%); background-image:-ms-linear-gradient(-25deg, rgba(57,111,185,0.9) 70%, rgba(57,111,185,0) 70.2%, rgba(57,111,185,0) 100%); color:#fff; padding:15px 20px; }
.main .mainvisual p { line-height:1.5; width:65%; margin:0; }
.main .mainvisual p.copy { font-size:18px; line-height:1.3; width:80%; margin:0 0 10px; }
.main .mainvisual p.copy .eng { display:inline-block; margin:0 0 5px; }

/* technology-box */
.technology-box { background:#f7f7f7; background-image:linear-gradient(-25deg, #f7f7f7 50%, #f2f2f2 50%, #f2f2f2 100%); background-image:-webkit-linear-gradient(-25deg, #f7f7f7 50%, #f2f2f2 50%, #f2f2f2 100%); background-image:-moz-linear-gradient(-25deg, #f7f7f7 50%, #f2f2f2 50%, #f2f2f2 100%); background-image:-ms-linear-gradient(-25deg, #f7f7f7 50%, #f2f2f2 50%, #f2f2f2 100%); clear:both; margin:20px -20px 0; padding:20px; }
.technology-box h2 { font-size:18px; margin:0 0 -5px; }
.technology-box .photo { text-align:center; margin:15px 0 0; }


@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}


@media screen and (min-width: 640px) {
.keyvisual { margin-bottom:0; }

/* mainvisual */
.main .mainvisual { background:none; margin:0; }
.main .mainvisual::before { background-image:linear-gradient(-25deg, rgba(57,111,185,0.9) 80%, rgba(57,111,185,0) 80.1%, rgba(57,111,185,0) 100%); background-image:-webkit-linear-gradient(-25deg, rgba(57,111,185,0.9) 80%, rgba(57,111,185,0) 80.1%, rgba(57,111,185,0) 100%); background-image:-moz-linear-gradient(-25deg, rgba(57,111,185,0.9) 80%, rgba(57,111,185,0) 80.1%, rgba(57,111,185,0) 100%); background-image:-ms-linear-gradient(-25deg, rgba(57,111,185,0.9) 80%, rgba(57,111,185,0) 80.1%, rgba(57,111,185,0) 100%); content:""; position:absolute; top:0; left:0; right:0; bottom:0; }
.main .mainvisual img { display:block; }
/*.main .mainvisual div { background:transparent; position:absolute; top:50%; left:50%; width:1264px; padding:0; transform:translate(-50%,-50%); }*/
.main .mainvisual div { background:transparent; position:absolute; top:50%; left:5%; padding:0; transform:translate(0,-50%); }
.main .mainvisual p { font-size:1.14em; line-height:2.25; width:70%; }
.main .mainvisual p.copy { font-size:2.76em; width:632px; margin:0 0 36px; }
.main .mainvisual p.copy .eng { margin:0 0 12px; }

/* products-box */
.technology-box { background:#f7f7f7; background-image:none; position:relative; margin:102px 0 0; padding:0; }
.technology-box .box-inner { max-width:1028px; margin:0 auto; padding:0 20px; }
.technology-box#technology01 { margin-top:156px; }
.technology-box#technology01,
.technology-box#technology03,
.technology-box#technology05 { background-image:linear-gradient(-25deg, #f7f7f7 32%, #f2f2f2 32%, #f2f2f2 100%); background-image:-webkit-linear-gradient(-25deg, #f7f7f7 32%, #f2f2f2 32%, #f2f2f2 100%); background-image:-moz-linear-gradient(-25deg, #f7f7f7 32%, #f2f2f2 32%, #f2f2f2 100%); background-image:-ms-linear-gradient(-25deg, #f7f7f7 32%, #f2f2f2 32%, #f2f2f2 100%); }
.technology-box#technology02,
.technology-box#technology04,
.technology-box#technology06 { background-image:linear-gradient(-25deg, #f7f7f7 76%, #f2f2f2 76%, #f2f2f2 100%); background-image:-webkit-linear-gradient(-25deg, #f7f7f7 76%, #f2f2f2 76%, #f2f2f2 100%); background-image:-moz-linear-gradient(-25deg, #f7f7f7 76%, #f2f2f2 76%, #f2f2f2 100%); background-image:-ms-linear-gradient(-25deg, #f7f7f7 76%, #f2f2f2 76%, #f2f2f2 100%); }
.technology-box .text { width:47.8%; min-height:210px; }
.technology-box .clm-l.text { padding:31px 0 30px; }
.technology-box .clm-r.text { padding:31px 0 30px; }
.technology-box h2 { font-size:2.14em; margin:0 0 -19px; }
.technology-box p { line-height:2.14; }
.technology-box .photo { width:48.2%; max-width:514px; margin:-20px 0; }
}

@media print, only screen and (min-width:1100px){
/* mainvisual */
.main .mainvisual::before { background-image:linear-gradient(-25deg, rgba(57,111,185,0.9) 50%, rgba(57,111,185,0) 50.1%, rgba(57,111,185,0) 100%); background-image:-webkit-linear-gradient(-25deg, rgba(57,111,185,0.9) 50%, rgba(57,111,185,0) 50.1%, rgba(57,111,185,0) 100%); background-image:-moz-linear-gradient(-25deg, rgba(57,111,185,0.9) 50%, rgba(57,111,185,0) 50.1%, rgba(57,111,185,0) 100%); background-image:-ms-linear-gradient(-25deg, rgba(57,111,185,0.9) 50%, rgba(57,111,185,0) 50.1%, rgba(57,111,185,0) 100%); }
.main .mainvisual p { width:395px; }
.main .mainvisual p.copy { width:632px; }
}


@media only screen and (min-width: 639px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-width: 639px) and (min-device-pixel-ratio: 2) {
}