@charset "Shift_JIS";

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

Name: add_module.css

Description: Main CSS

Create: 2019.09.19
Update: 

Copyright 2019 Hitachi, Ltd.

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


/* 標準上書き
===================================================== */
/* エリア内リスト使用による、不要なマージン削除・フォントサイズ補正 */
.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%;
}



/* contents
===================================================== */
/* common
-------------------------------------------- */
img.PC{
display:block !important;
}
img.SP,
#Sec03 .LinkSet.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%;
}


.ListStyle1.circle li {
  width: calc((100% - 15px) / 2);
  position: relative;
  padding-left: 1em;
  box-sizing: border-box;
   background: none; 
}
.ListStyle1.circle li::before {
  content: '●';
  display: inline-block;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0;
}

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

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



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

#BrandingImgStyle1 img{
  margin:0 auto;
}
#BrandingImgStyle1 .SP{
display:none;
}

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

/*  */
#InfoTxt{
margin-bottom:25px;
padding:15px;
background:#2d7c99;
color:#fff;
font-weight:bold;
}
#InfoTxt mark{
  display: block;
margin-top:10px;
padding:10px;
background:#fff;
color:#202020;
}



/* 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,.thema5,
.seminar1{
color:#fff;
padding:4px 17px;
display: block;
}

.thema1{background:#115b7c;} /* purple */
.thema2{background:#3e692b;} /* green */
.thema3{background:#cc5f65;} /* orange */
.thema4{background:#734468;} /* pink */
.thema5{background:#2d7c99;} 

.seminar1{
margin-right:10px;
background:#7288b1;
}

.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,
#Sec04-0 .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;
}

/* PhotoList */
.JS .Grid4 .PhotoList {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
margin-top: 10px;
}
.JS .Grid4 .PhotoList img {
  max-width: 100%;
}


/* 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 {
display: flex;
flex-wrap: wrap;
width:100%;
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 {
flex: 1 1 auto;
position: relative;
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 0;
font-size: 83%;
width: 100%;
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;
}








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

/* for - 994px
-------------------------------------------- */
@media screen and (max-width: 994px){
.JS #SnsBox .ColumnSet{
margin:0;
}

}



/* for - 800px　臨時/折り返されてしまうのでここで変更　本来は767pxの設定
-------------------------------------------- */
@media screen and (max-width: 800px) { 
.TopInnerLinks li{
width: 50%;
}
.TopInnerLinks li a{
font-size:76%;
padding:10px 5px !important;
}
.TopInnerLinks li#Nav01{
display:none;
}
.TopInnerLinks li#Nav02,
/*.TopInnerLinks li#Nav03,*/
.TopInnerLinks li#Nav04,
.TopInnerLinks li#Nav05,
.TopInnerLinks li#Nav06{
border-bottom:1px solid #fff;
}

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

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

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

span.SP{
display:inline;
}


/**/
.JS #BrandingImgStyle1{
  text-align: center;
  margin:0 -15px 20px;
}

#BrandingImgStyle1 .SP{
display:block;
}

#BrandingImgStyle1 .PC{
display:none;
}

#InfoTxt{
margin:0 -15px 15px;
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%;
}

.JS .Grid4 ul.PhotoList .Column1{
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 */


/* SNS */
#SnsBox .Column2:first-child{
margin:0 0 15px;
}

.JS #SnsBox .ImgRightAdjust{
float:right;
}

}

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


/* 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 #Sec06 .ImgRightAdjust{
float:none;
width:100%;
margin:0 auto;
padding:0;
}



.thema1,.thema2,.thema3,.thema4,.thema5{
display:block;
}

.JS .Grid4 ul.PhotoList .Column1{
width:auto;
margin:0;
}

/* float navi */



/*  */
.twitter-timeline{
width:100%;
}

.JS #SnsBox .ImgRightAdjust{
float:none;
}

}







.SeminarBox1 {
  background:#f2f2f2;
  padding:19px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.SeminarBox1 .photo_sp {
  display: none;
}
.SeminarBox1 .text {
  padding-right:10px;
}
.SeminarBox1 .text .num {
  display: flex;
  align-items: stretch;
}
.SeminarBox1 .text .num em {
  font-style: normal;
  white-space: nowrap;
  border:1px solid #333;
  padding:0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-right:10px;
}
.SeminarBox1 .text .num span {
  font-size: 12px;
  line-height: 1.4;
  align-self: center;
}
  
.SeminarBox1 .text h4 {
  margin:15px 0;
  font-size: 24px;
}

.SeminarBox1 .prof p {
  font-size: 12px;
}
.SeminarBox1 .prof strong {
  font-size: 24px;
  display: block;
  margin-top:10px;
  font-weight: normal;
}
.SeminarBox2_wrap {
/*    display: flex;
    justify-content: space-between;*/
}
.SeminarBox2 {
    width: 100%;
    background: #f2f2f2;
    padding: 10px 15px;
    margin: 0 0 5px;
    box-sizing: border-box;
  
      display: flex;
    justify-content: space-between;
}

.SeminarBox2 .num {
  display: flex;
  align-items: stretch;
}
.SeminarBox2 .num em {
  font-style: normal;
  white-space: nowrap;
  border:1px solid #333;
  padding:0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-right:10px;
}
.SeminarBox2 .num span {
  font-size: 12px;
  line-height: 1.4;
  align-self: center;
}
  
.SeminarBox2 h4 {
  margin:10px 0 15px;
}

.SeminarBox2 .prof p {
  line-height: 16px;
  min-height: 48px;
  font-size: 12px;
}
.SeminarBox2 .prof strong {
  font-size: 14px;
  display: block;
  margin-top:5px;
  font-weight: normal;
}

/* 右下掲載時用
.SeminarBox2 .prof {
  position: relative;
  padding-right:80px;
}
.SeminarBox2 .prof .photo {
  position: absolute;
  top:0;
  right:0;
}
*/

/*.SeminarBox2:last-child .prof p {
  font-size: 11px;
  line-height: 13px;
}*/
.SeminarBox2 .photo {
  width: 200px;
}
.SeminarBox2 .photo img {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .SeminarBox1 {
    display: block;
    padding: 10px 15px;
  }
  .SeminarBox1 .photo_pc {
    display: none;
  }
  .SeminarBox1 .photo_sp {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
  }
  .SeminarBox1 .text {
    padding-right: 0px;
  }
  .SeminarBox1 .text h4 {
    margin: 10px 0 15px;
    font-size: 96%;
  }
  .SeminarBox1 .prof {
    position: relative;
    padding-right: 80px;
  }
  .SeminarBox1 .prof p {
    line-height: 16px;
    min-height: 48px;
    font-size: 12px;
  }
  .SeminarBox1 .prof strong {
    font-size: 14px;
    margin-top: 5px;
    font-weight: normal;
  }
  .SeminarBox2_wrap {
  }
  .SeminarBox2 {
    display: block;
  }
  .SeminarBox2 .prof {
  }
  .SeminarBox2 .text {
    margin-bottom: 10px;
  }
  .SeminarBox2 .photo {
    width: 60%;
    margin: 10px auto 5px;
  }
}
@media screen and (max-width: 399px) {
  .SeminarBox2 .photo {
    width: 100%;
  }
}



#Contents {
  overflow: hidden;
}

h2 {
  position: relative;
  z-index: 2;
}

figure.boothimage {
  margin:-40px 0 0;
  padding:0;
}
figure.boothimage img {
  margin-left:-467.5px;
}
figure.boothimage img.large {
  display: block;
}
figure.boothimage img.small {
  display: none;
}
figure.boothimage figcaption {
  margin:0;
  padding:0;
  font-size: 12px;
  transform: translateY(-40px);
}



@media screen and (max-width: 994px){
figure.boothimage {
  margin:-20px 0 0;
}
figure.boothimage img {
  margin-left:-32%;
  max-width: none !important;
  width:160%;
  
}
}

@media screen and (max-width: 767px) {
  figure.boothimage {
    margin:-10px -15px 0;
  }  
  figure.boothimage img {
    margin:0;
    width:100%;
  }
  figure.boothimage img.large {
    display: none;
  }
  figure.boothimage img.small {
    display: block;
  }
  figure.boothimage figcaption {
    margin:0 0 0 15px;
    transform: translateY(-20px) scale(.5);
    transform-origin: left center;
}
}


.youtubewrap {
  max-width: 560px;
  margin:0 auto;
}

.youtubewrap p {
  margin-top:5px;
  font-size: 90%;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}





/* 展示 */
.thema1{background:#E60039;}
.thema2{background:#005BAC;}
.thema3{background:#021764;}
.thema4{background:#949595;}

/**/