@charset "Shift_JIS";

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

Name: add_module.css

Description: Main CSS

Create: 2021.11.16
Update: 

Copyright 2021 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;
}
.MB5{
margin-bottom:5px !important;
}
.MB25{
margin-bottom:25px !important;
}

.normal{
font-weight:normal;
}

.small{
font-size:86%;
}

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

.InlineBlock {
display: inline-block;
}


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

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



/* branding image
-------------------------------------------- */
#BrandingImgStyle1{
position:relative;
margin-bottom:0;
padding:0;
overflow:hidden;
  background:url(../image/branding_bg.jpg) no-repeat center center #e5e6e5;
}

#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:30px;
}



/* 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;
}



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

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

.JS #InfoTxt {
  margin-left: -15px;
  margin-right: -15px;
}

.JS #SnsBox .ColumnSet{
margin:0;
}

}



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

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

.JS span.SP{
display:inline;
}


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

.JS #BrandingImgStyle1 .SP{
display:block;
}

.JS #BrandingImgStyle1 .PC{
display:none;
}

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

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

.JS #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;
}

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

.JS #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 */
.JS .TopInnerLinks li{
width:25%; /* 100/4 */
}

.JS .TopInnerLinks li#Nav02,
.JS .TopInnerLinks li#Nav03,
.JS .TopInnerLinks li#Nav04,
.JS .TopInnerLinks li#Nav05,
.JS .TopInnerLinks li#Nav06{
border-bottom:1px solid #fff;;
}

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

.JS .TopInnerLinks li#Nav01{
display:none;
}

.JS .TopInnerLinks li#Nav02/*,
.JS .TopInnerLinks li#Nav06*/{
border-left:none;
}

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

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

}


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


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

.JS .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;
}



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

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

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

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

.JS .TopInnerLinks li#Nav02,
.JS .TopInnerLinks li#Nav03,
.JS .TopInnerLinks li#Nav04,
.JS .TopInnerLinks li#Nav05{
border-bottom:1px solid #fff;;
}

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

.JS .TopInnerLinks li#Nav01/*,
.JS .TopInnerLinks li#Nav06*/{
display:none;
}



/*  */
.JS .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:calc(32%);
  background:#f2f2f2;
  padding:10px 15px;
  margin:0 0 5px;
  box-sizing: border-box;
}

.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 {
  position: relative;
  padding-right:80px;
}
.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 .photo {
  position: absolute;
  top:0;
  right:0;
}

.SeminarBox2:last-child .prof p {
  font-size: 11px;
  line-height: 13px;
}


@media screen and (max-width: 767px) {
.JS .SeminarBox1 {
  display: block;
  padding:10px 15px;
}
.JS .SeminarBox1 .photo_pc {
  display: none;
}
.JS .SeminarBox1 .photo_sp {
  position: absolute;
  top:0;
  right:0;
  display: block;
  
}
.JS .SeminarBox1 .text {
  padding-right:0px;
}
.JS .SeminarBox1 .text h4 {
  margin:10px 0 15px;
  font-size: 96%;
}

  .JS .SeminarBox1 .prof {
    position: relative;
    padding-right:80px;
  } 
  .JS .SeminarBox1 .prof p {
  line-height: 16px;
  min-height: 48px;
  font-size: 12px;
  } 
.JS .SeminarBox1 .prof strong {
  font-size: 14px;
  margin-top:5px;
  font-weight: normal;
}

  
  
.JS .SeminarBox2_wrap {
  display: block;
  
}
.JS .SeminarBox2 {
  width:auto;
}
}



#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;
}