@charset "utf-8";

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

Name: extope.css

Description: CSS for Additional Common Modules

Create: 2018.5
Update: 

Copyright 2018 Hitachi High-Technologies Corporation.

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

body {
background-color: #132862;
}

#Contents {
background-color: transparent;
padding-bottom: 0;
border-bottom: 1px solid #fff;
}

#Contents,
#Footer,
#PageTopBottom,
.FatMenu,
.AllHeaderSet { position: relative; z-index: 100; }

.exMainBg {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
background-repeat: repeat;
background-position: 50% 0;

position: fixed;
z-index: 50;
}
#ExMainBg1 {
background-image: url(/image/global/extope/bg_web1.png);
}
#ExMainBg2 {
z-index: 51;
background-image: url(/image/global/extope/bg_web2.png);
}
#ExMainBg3 {
z-index: 52;
background-image: url(/image/global/extope/bg_web3.png);
}


#ExMainContainer {
padding-bottom: 70px;
overflow: hidden;
}
#ExMainContainer #ExMainRead {
position: relative;
width: 521px;
margin: 0 auto;
padding-top: 145px;
color: #fff;
}
#ExMainContainer #ExMainRead .ImgOnlyStyle {
margin-bottom: 50px;
}
#ExMainContainer .ExInner {
position: relative;
max-width: 965px;
margin: 0 auto;
color: #fff;
}

#ExCaseContainer {
padding: 55px 0 1px;
background-color: #fff;
color: #132862;
}
#ExCaseContainer .ExInner {
position: relative;
max-width: 965px;
margin: 0 auto;
}

#ExFootContainer {
padding: 40px 0 1px;
}
#ExFootContainer .ExInner {
position: relative;
max-width: 965px;
margin: 0 auto;
color: #fff;
}

.ExWhiteBlock {
padding-top: 1px;
background-color: #fff;
}

.ExImgSet {
margin: 0 -72px;
}
.ExImgSet:after {
content: "";
display: block;
clear: both;
}
.ExImgSet .ImgLeft,
.ExImgSet .ImgRight {
position: relative;
width: 50%;
margin: 0;
padding: 0;
box-sizing: border-box;
z-index: 110;
opacity: 1;
}
.ExImgSet .ImgLeft {
float: left;
}
.ExImgSet .ImgRight {
float: right;
text-align: right;
}
.ExImgSet .TextLeft,
.ExImgSet .TextRight {
width: 50%;
min-height: 300px;
background-color: rgba(8, 18, 36, 0.75);
margin: 70px 0;
box-sizing: border-box;
opacity: 1;
}
.ExImgSet .TextLeft {
float: left;
padding: 0 30px 0 72px;
}
.ExImgSet .TextRight {
position: relative;
float: right;
padding: 0 72px 0 30px;
}
.ExImgSet .exMain1 {
padding-top: 30px;
}
.ExImgSet .exMain2 {
padding-top: 85px;
}
.ExImgSet .exMain3 {
padding-top: 80px;
}

.ExImgSet .rightUp {
transform:skewY(-7deg);
}
.ExImgSet .rightUp p,
.ExImgSet .rightUp dl {
transform:skewY(7deg);
}
.ExImgSet .rightDown {
transform:skewY(7deg);
}
.ExImgSet .rightDown p,
.ExImgSet .rightDown dl {
transform:skewY(-7deg);
}
.ExImgSet .rightUp {
transform-origin: right top;
}
.ExImgSet .rightDown {
transform-origin: left top;
}

.ExImgSet .TextRight.rightUp:before,
.ExImgSet .TextRight.rightDown:before {
content: "";
background-color: rgba(8, 18, 36, 0.75);
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 56px;
}
.ExImgSet .TextLeft.rightUp:after {
content: "";
background-color: rgba(8, 18, 36, 0.75);
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 56px;
}

.ExImgSet .ImgLeft.skrollable,
.ExImgSet .ImgRight.skrollable,
.ExImgSet .TextLeft.skrollable,
.ExImgSet .TextRight.skrollable {
opacity: 0;
}

.exListStyle {
margin: 0 0 1px;
font-size: 90%;
}
.exListStyle dt {
margin: 0 0 10px;
padding-top: 30px;
font-size: 140%;
line-height: 140%;
font-weight: bold;
}
.exListStyle dd {
margin: 0;
font-size: 90%;
line-height: 140%;
}
.exListStyle dt:first-child {
padding-top: 0;
}

.headImgStyle {
margin: 0 0 15px !important;
padding: 0 !important;
background: none !important;
}
.headImgStyle + .TextStyle1 {
margin-bottom: 30px;
font-size: 100%;
}

.functionList {
margin: 0;
letter-spacing: -0.5em;
}
.functionList > li {
letter-spacing: normal;
display: inline-block;
margin: 0 0 15px;
padding: 0 10px;
width: 25%;
vertical-align: top;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.functionList .functionImg {
display: inline-block;
margin-bottom: 20px;
background-color: #fff;
border-radius: 50%;
}
.functionList .functionImg img {
display: block;
max-width: 100%;
height: auto;
}
.functionList .functionText {
display: inline-block;
line-height: 130%;
font-size: 90%;
color: #fff !important;

background-image: url(/image/common/en/r1/icon/icon_link_right_white_hd.gif) !important;
background-repeat: no-repeat;
background-position: right center;
background-size: 16px 16px;
-moz-background-size: 16px 16px;
-webkit-background-size: 16px 16px;
-o-background-size: 16px 16px;
-ms-background-size: 16px 16px;
}
.functionList a {
color: transparent;
}

.functionList a:link .functionText,
.functionList a:visited .functionText {
padding: 4px 15px 4px 10px;
color: #fff;
text-decoration: none;
border-right: solid 3px transparent;
}
.functionList a:hover .functionText,
.functionList a:active .functionText {
padding: 4px 17px 4px 10px;
color: #fff;
text-decoration: none;
border-right: solid 1px transparent;
}

.functionContent {
padding:10px;
background:#fff;
color: #132761;
}
.functionContent .Title {
font-size: 100%;
margin-bottom: 20px;
}
.functionContent strong {
color: #132761;
}
.functionContent .ImgOnlyStyle img {
max-width: 100%;
height: auto;
} 

dl.ListStyle1 dt.noMarker {
padding-left: 0;
background: none;
}
dl.ListStyle1 dd > ul {
font-size: 100%;
}

.caseUnit {
margin: 0 0 20px;
padding-top: 30%;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
}
.caseUnit:after {
content: "";
display: block;
clear: both;
}
.caseUnit .Inner {
margin: 0 auto;
max-width: 965px;
}
.caseUnit .TextSet {
position: relative;
width: 50%;
padding: 20px 35px;
background-color: rgba(8, 18, 36, 0.75);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.caseUnit .TextSet * {
color: #fff;
}
.caseUnit .TextSet .CatchCopy {
font-size: 110%;
display: table;
}
.caseUnit .TextSet .CatchCopy img {
display: table-cell;
padding-right: 10px;
vertical-align: middle;
}
.caseUnit .TextSet .CatchCopy strong {
display: table-cell;
vertical-align: middle;
}

.caseUnit .TextSet .problem {
position: relative;
margin-bottom: 35px;
}
.caseUnit .TextSet .problem:after {
position: absolute;
content: '';
bottom: -20px;
left: 50%;
width: 13px;
height:11px;
margin-left: -7px;
background: url(/image/global/extope/case_arrow.png) top left no-repeat;
background-size: 13px 11px;
}

.caseUnit .TextSet.alignLeft {
float: left;
}
.caseUnit .TextSet.alignRight {
float: right;
}
.caseUnit .alignLeft:before,
.caseUnit .alignRight:after {
content: "";
background-color: rgba(8, 18, 36, 0.75);
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
}
.caseUnit .alignLeft:before {
right: 100%;
}
.caseUnit .alignRight:after {
left: 100%;
}

.caseUnit .caseBackGround {
	display: none;
}

#ExFootContainer .ButtonStyle1 a {
background-image: url(/image/common/en/r1/icon/icon_inquiry_white_hd.png);
background-position: right 8px center;
transition: 0.5s;
border: solid 1px #fff;
border-radius: 3px;
}
#ExFootContainer .ButtonStyle1 a:link,
#ExFootContainer .ButtonStyle1 a:visited {
padding: 9px 32px 9px 15px;
background-color: transparent;
color: #fff;
text-decoration: none;
border-right: solid 1px #fff;
}
#ExFootContainer .ButtonStyle1 a:hover,
#ExFootContainer .ButtonStyle1 a:active {
padding: 9px 32px 9px 15px;
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
text-decoration: none;
border-right: solid 1px #fff;
}

.imgBorder {
border: 1px solid #ccc;
}



/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {

.JS #ExMainContainer,
.JS #ExCaseContainer,
.JS #ExFootContainer,
.JS .ExWhiteBlock {
margin: 0 -15px;
}
.JS #ExMainContainer,
.JS #ExFootContainer,
.JS .ExWhiteBlock {
padding-left: 15px;
padding-right: 15px;
}
.JS .ExImgSet {
margin: 0 -15px;
}
.JS .ExImgSet .TextLeft,
.JS .ExImgSet .TextRight {
padding-left: 15px;
padding-right: 15px;
}


}


/* for - 767px
=========================================================================================== */


@media screen and (max-width: 768px) {

.JS body {
background-color: #132862;
}
.JS .exMainBg {
background-size: contain;
}
.JS #ExMainBg1,
.JS #ExMainBg2 {
background-image: none;
}
#Contents {
border-bottom: 1px solid transparent;
}

.JS #ExCaseContainer {
padding-left: 15px;
padding-right: 15px;
}

.JS .ExImgSet {
margin: 0 0 15px 0;
}
.JS .ExImgSet .ImgLeft,
.JS .ExImgSet .ImgRight {
float: none;
width: auto;
}
.JS .ExImgSet .ImgLeft img,
.JS .ExImgSet .ImgRight img {
width: 100%;
height: auto;
}
.JS .ExImgSet .TextLeft,
.JS .ExImgSet .TextRight {
float: none;
width: 100%;
height: auto;
min-height: 0;
margin: 0;
padding: 20px 15px !important;
}
.JS .ExImgSet .rightUp,
.JS .ExImgSet .rightDown {
transform:skewY(0);
}
.JS .ExImgSet .rightUp p,
.JS .ExImgSet .rightUp dl,
.JS .ExImgSet .rightDown p,
.JS .ExImgSet .rightDown dl {
transform:skewY(0);
}
.JS .ExImgSet .TextRight:before,
.JS .ExImgSet .TextLeft:after {
content: none;
}

.JS .functionList > li {
padding: 0 5px;
}
.JS .functionList .functionImg {
margin-bottom: 5px;
}

.JS .caseUnit {
padding-top: 0;
}
.JS .caseUnit .caseBackGround {
display: block;
}
.JS .caseUnit .TextSet {
float: none !important;
padding: 15px;
width: auto;
}
.JS .caseUnit .TextSet:before,
.JS .caseUnit .TextSet:after {
content: none !important;
}

}


/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {

.JS #ExMainContainer #ExMainRead {
width: auto;
padding-top: 70px;
}

.JS .functionList > li {
width: 50%;
}

}


/* for - 399px
=========================================================================================== */

@media screen and (max-width: 399px) {

}