@charset "Shift_JIS";

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

Name: add_module.css

Description: Main CSS

Create: 2018.03.05
Update: 2018.05.24

Copyright 2018 Hitachi, Ltd.

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



/* ?W??????
===================================================== */
/* ?G???A?????X?g?g?p????A?s?v??}?[?W?????E?t?H???g?T?C?Y?? */
.ListStyle1 li ul, .ListStyle1 li ol,
.ListStyle2 li ul, .ListStyle2 li ol,
.ListStyle1 dd ul, .ListStyle1 dd ol,
.ListStyle2 dd ul, .ListStyle2 dd ol,
.LinkListStyle1 li ul,.LinkListStyle1 li ol,
.LinkListStyle2 li ul, .LinkListStyle2 li ol{
margin-bottom: 0;
font-size: 100%;
}


/* jquery.bxslider.css */
.bx-wrapper{
margin: 0 auto;
}

.bx-wrapper .bx-viewport{
left:0;
border:none;
}

.bx-wrapper .bx-pager.bx-default-pager a{
margin: 10px 5px;
border-radius:50%;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active{
background: #F00;
}

.bx-wrapper .bx-controls-auto .bx-start,
.bx-wrapper .bx-controls-auto .bx-stop{
margin: 13px 3px;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{
text-align: left;
width: auto;
position: absolute;
bottom: 0;
right: 10px;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{
right: 60px;
bottom: -4px;
float:left;
width: 8px;
}

.bx-wrapper .bx-caption {
bottom: 0;
}




/* contents
===================================================== */
/* common
-------------------------------------------- */
img.PC{
display:block !important;
}
img.SP{
display:none !important;
}

span.PC{
display:inline;
}

span.SP{
display:none;
}

/*  */
.ml10{
margin-left:10px !important;
}
.ml15{
margin-left:15px !important;
}
.ml20{
margin-left:20px !important;
}
.MB0{
margin-bottom:0 !important;
}
.MB25{
margin-bottom:25px !important;
}

.normal{
font-weight:normal;
}

.small{
font-size:86%;
}

h5{
margin:0 0 10px;
font-size: 96%;
}

.caseIndex{
margin: 0 0 10px;
padding:0 0 0 8px;
font-size: 96%;
font-weight: bold;
color: #333;
line-height: 130%;
border-left:3px solid #333;
}

/* section for floating navi */
#Sec01{
padding-top: 70px;
}

#Sec03 h4 span{
margin-left:0.5em;
}



/* branding image
-------------------------------------------- */
#BrandingImgStyle1{
position:relative;
margin-bottom:0;
padding:0;
overflow:hidden;
}

#BrandingImgStyle1 .SP{
display:none;
}

#BrandingImgStyle1 img{
max-width:100%;
}

/*  */
#InfoTxt{
margin-bottom:25px;
padding:15px;
background:#e60027;
color:#fff;
font-weight:bold;
}



/* solution list
-------------------------------------------- */
dl.LinkListStyle1 dt{
margin: 20px 0 0;
padding: 0 0 5px 0;
background-size: auto auto;
background-size: 16px 16px;
-moz-background-size: 16px 16px;
-webkit-background-size: 16px 16px;
-o-background-size: 16px 16px;
-ms-background-size: 16px 16px;
line-height: 140%;
}

dl.LinkListStyle1 dd{
padding-left: 0;
margin-bottom:25px;
}

dl.LinkListStyle1 dd.txt{
margin-bottom:0;
}

.thema1,.thema2,.thema3,.thema4{
color:#fff;
padding:3px 6px;
}

.thema1{background:#00A0E9;} /* blue */
.thema2{background:#8FC31F;} /* green */
.thema4{background:#BA5DA0;} /* pink */
.thema3{background:#B28247;} /* brown */

.LinkListStyle1 li .LinkListStyle1{
padding:3px 0 3px 15px;
}

dl.LinkListStyle1 dd ul.ColumnSet .Column1{
margin:0 0 0 15px;
}

dl.LinkListStyle1 dd ul.ColumnSet .Column1.FirstItem{
margin:0;
}

dl.LinkListStyle1 dd ul.ColumnSet .Column1 p.ImgOnlyStyle{
margin-bottom:0;
}

/* movie link */
.LinkListStyle1 li a.movie{
padding:0;
background:none;
}

.ImgOnlyStyle a.movie {
position: relative;
display: inline-block;
}

.ImgOnlyStyle a.movie:before {
content: "";
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
background-color: #e60027;
opacity: .5;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}

.ImgOnlyStyle a.movie:after {
content: "";
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
background-color: #e60027;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}

.PC .ImgOnlyStyle a.movie:hover:before,
.PC .ImgOnlyStyle a.movie:active:before,
.PC .ImgOnlyStyle a.movie:hover:after,
.PC .ImgOnlyStyle a.movie:active:after {background-color: #b1000e;}

.ImgOnlyStyle a.movie span {
position: relative;
display: block;
}

.ImgOnlyStyle a.movie span:after {
content: "";
position: absolute;
z-index: 2;
width: 0;
height: 0;
top: 50%;
left: 50%;
margin: -9px 0 0 -3px;
border-left: solid 9px #fff;
border-top: solid 9px transparent;
border-bottom: solid 9px transparent;
}



/* seminar
-------------------------------------------- */
#Sec03 dl.LinkListStyle1 dt{
margin-top:0;
}

#Sec03 dl.LinkListStyle1 dd{
margin-bottom:20px;
padding-top:0;
}

#Sec03 dl.LinkListStyle1 dd p,
#Sec03 dl.LinkListStyle1 dd img{
margin-bottom:0;
}



/* float navi
-------------------------------------------- */
.FloatingUnit {
position: relative;
width: 100%;
margin: 0 0 -50px;
padding: 0;
overflow: hidden;
background-color: #E40A2D;
z-index: 99;
}

.TopInnerLinks {
clear: both;
max-width: 965px;
margin: 0 auto;
text-align: center;
}

.TopInnerLinks ul {
position:relative;
width:100%;
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.TopInnerLinks li {
float: left;
border-left: 1px solid #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.TopInnerLinks li:first-child{
border-left:none;
}

.TopInnerLinks li a {
display: inline-block;
padding: 12px 12px;
font-size: 83%;
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;
}

.TopInnerLinks li a:link,
.TopInnerLinks li a:visited {
color: #fff;
text-decoration: none;
}

.TopInnerLinks li a:hover,
.TopInnerLinks li a:active,
.TopInnerLinks li.Current a {
background-color: #4F4F4F !important;
color: #fff;
text-decoration: none;
}

.fixed{
position: fixed !important;
top: 0;
left:0;
margin-top: 0 !important;
z-index: 999;
}

/* thanks meg area */
#IntroductionArea .BoxPatternB{
background-color: #fff;
border: 2px solid #c02;
padding: 15x;
margin: 0 0 25px;
}

#IntroductionArea .BoxPatternB h2{
color:#000;
}


/* lity add
-------------------------------------------- */
.lity{
background: #fff;
background: rgba(255,255,255, 0.8);
}

.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited{
text-shadow:none;
background:#e60027;
}

.lity-close:active{
top:0;
}



/* @media
===================================================== */

/* for - 767px
-------------------------------------------- */
@media screen and (max-width: 767px) {
/**/
img.SP{
display:block !important;
}

img.PC,span.PC{
display:none !important;
}

span.SP{
display:inline;
}


/**/
.JS #BrandingImgStyle1{
margin:0 -15px;
}

#BrandingImgStyle1 .SP{
display:block;
}

#BrandingImgStyle1 .PC{
display:none;
}

#InfoTxt{
margin:0 -15px 25px;
font-size:80%;
}

/* section */
.JS #IntroductionArea .ImgRightAdjust{
float:right;
width:45%;
margin:0 0 0 2%;
}

#Sec01 .DateListStyle2 dd .LinkListStyle1{
margin:0 0 10px;
font-size:90%;
}

.JS #Sec08 .ImgRightAdjust{
float:right;
width:45%;
margin:0 0 0 2%;
}

dl.LinkListStyle1 dd ul.ColumnSet .Column1{
float:left;
width:50%;
margin:0;
}

#Sec03 h4 span{
display:block !important;
margin-left:0;
}

#Sec03 .TextStyle1{
font-size:81.04%;
}

.JS #Sec02 .MainStage{
float:none;
margin: 0 0 0 -15px;
}

.JS #Sec02 .MainStage:after{
content: "";
display: block;
clear: both;
}

.JS #Sec02 .MainStage div{
float:left;
width:50%;
padding:0 0 0 15px;
box-sizing:border-box;
}


/* float navi */
.TopInnerLinks li{
width:33%; /* 100/4 */
}

.TopInnerLinks li a{
width:100%;
font-size:76%;
padding:10px 5px !important;
}

.TopInnerLinks li#Nav01,
.TopInnerLinks li#Nav03,
.TopInnerLinks li#Nav04,
.TopInnerLinks li#Nav06{
display:none;
}

.TopInnerLinks li#Nav07{
border-left:none;
}

}


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


/*  */
.slideBox .SP{
display:block;
}

.slideBox .PC{
display:none;
}

/**/
.JS #IntroductionArea .ImgRightAdjust{
float:none;
width:100%;
margin:0 auto;
}

/**/
.JS #Sec02 .ImgRightAdjust,
.JS #Sec08 .ImgRightAdjust,
.JS #Sec02 .MainStage div{
float:none;
width:100%;
margin:0 auto;
padding:0;
}

.JS #Sec02 .ImgRightAdjust .ImgOnlyStyle,
.JS #Sec08 .ImgRightAdjust .ImgOnlyStyle{
text-align:center;
}

.thema1,.thema2,.thema3,.thema4{
display:block;
font-size:90%;
}

dl.LinkListStyle1 dd ul.ColumnSet .Column1{
float:none;
width:auto;
}



/* float navi */
.TopInnerLinks li{
width:25%;
}

.TopInnerLinks li a{
font-size:76%;
}

.TopInnerLinks li#Nav01,
.TopInnerLinks li#Nav03,
.TopInnerLinks li#Nav04,
.TopInnerLinks li#Nav06{
display:none;
}

.TopInnerLinks li#Nav07{
width:50%;
border-left:none;
}

}




@media print {
	img.sp {
		display: none;
	}
}