body{
font-family:'メイリオ',meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック',sans-serif !important;
}


#special_container{
background-color:#fff;
}

#social_bkm_wrap_top {
margin:20px 5% 0;
border-top:none;
}


a{
transition:all 0.3s ease;
line-height:1.6;
}

a:hover{
color:#444;
}



/* fade */

.fadein {
  opacity : 0;
  transform: translateY(-45px);
  transition: all 1s;
}


/* anime */

@keyframes effect {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-30px);
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
}
}


@keyframes fadein {
0% {
    opacity: 0;/* 透明 */
}
100% {
    opacity: 1;/* 不透明 */
}
}




/* head */

.header_block{
background:url(/info/event/vmware/201903/media/hero.jpg) center center no-repeat;
background-size:cover;
height:450px;
}

.title_seminar {
font-family:'Century Gothic' , sans-serif;
width:100%;
margin:10% auto 15px;
padding:0;
color: #ffffff;
line-height: 1.6;
text-align:center;
/*background:rgba(255,255,255,0.4);*/
display:block;
}

.title_seminar span{
display:block;
opacity:0;
margin:0 auto;
}

.title_seminar span.seminar_ttl{
font-size:180%;
animation: effect 1.0s ease 0.5s forwards;
}

.title_seminar span.seminar_date{
font-size:120%;
animation: effect 1.0s ease 1.0s forwards;
}



/* btn */

.btn_entry,
.btn_entry_in{
clear:both;
width:40%;
margin:15px auto;
padding:20px 0;
background-color:#00bdd1;
color:#fff;
text-align:center;
display:block;
font-size:140%;
font-weight:bold;
}

.btn_entry{
opacity:0;
animation: fadein 1.5s ease 1.8s forwards;
}


.btn_entry:hover{
background:rgba(255,255,255,0.6);
}

.btn_entry_in{
margin:45px auto 30px;
width:80%;
}

.btn_entry_in:hover{
/*background-color:#80c12d;*/
background-color:#2fceb9;
color:#fff;
text-decoration:none;
cursor:pointer;
}





/* block */
h2 {
font-size:180%;
font-weight:normal;
line-height: 1.8;
text-align:center;
margin:2% auto 4%;
display:inline-block;
/*border:1px solid #1796d0;*/
border:1px solid #00c0d4;
color:#00c0d4;
background:rgba(255,255,255,0.6);
/*background:none;*/
padding:15px;
}


h3 {
font-size:140%;
text-align:center;
margin:2% auto;
padding:10px;
border:1px solid #ccc;
color:#666;
font-weight:normal;
}



.seminar_block{
clear:both;
margin:0 auto;
text-align:center;
position:relative;
}

.seminar_block p{
font-size:120%;
line-height:1.6;
text-align:left;
color:#353535;
}



.back_theater{
background:url(/info/event/vmware/201903/media/back_theater.jpg) center center no-repeat;
background-size:cover;
background-attachment: fixed;
}


.back_summary{
background:url(/info/event/vmware/201903/media/back_summary.jpg) center bottom no-repeat;
background-size:cover;
background-attachment: fixed;
}


.back_accsess{
background:url(/info/event/vmware/201903/media/back_accsess.jpg) center bottom no-repeat;
background-size:cover;
background-attachment: fixed;
}



.lead,
.theater,
.summary,
.session,
.entry,
.accsess,
.personal{
padding:3% 5%;
display:block;
}

.gray{
background-color:#f5f5f5;
}


.lead .subttl{
margin:0 0 20px;
padding:10px;
}

.lead .ttl01,
.lead .ttl02{
text-align:center;
font-size:140%;
display:block;
opacity:0;
color:#1796d0;
}

.lead .ttl01{
animation: effect 1.0s ease 1.0s forwards;
}

.lead .ttl02{
animation: effect 1.0s ease 1.5s forwards;
}


.lead p{
/*background-color:#f5f5f5;*/
font-size:80%;
}



.theater table{
background:rgba(255, 255, 255, 0.75);
color:#444;
}

.theater table td{
padding:20px 25px;
border-bottom:1px dotted #ccc;
font-size:130%;
text-align:left;
line-height:1.4;
}

.theater table td span{
font-size:70%;
display:block;
margin-top:7px;
}


.summary{
padding-bottom:35px;
}

.summary table th,
.summary table td
{
width:100%;
padding:20px 0;
border-bottom:1px solid #ccc;
font-size:120%;
text-align:center;
display:block;
font-weight:normal;
}

.summary table th{
color:#808080;
} 


.session{
position:relative;
overflow:hidden;
/*border-bottom:1px solid #eee;*/
}


.session:before{
content:"";
position:absolute;
top:0;
left:5px;
width:5px;
height:50%;
background-color:#1796d0;
transform:skew(-45deg);
}

.session:after{
content:"";
position:absolute;
bottom:0;
right:5px;
width:5px;
height:50%;
background-color:#80c12d;
transform:skew(-45deg);
}


.personal{
font-size:70%;
margin:0 auto; 
padding-bottom:30px;
}



.entry_info{
border:1px solid #cc0000;
margin:0 auto;
padding:2% 3%;
color:#cc0000 !important;
font-size:90% !important;
width:74%;
}










/* responsive */


@media (max-width: 800px) {


.title_seminar span.seminar_ttl{
font-size:140%;
}

.title_seminar span.seminar_date{
font-size:100%;
}


.btn_entry{
width:70%;
}


}

@media (max-width: 480px) {


.header_block{
background:url(/info/event/vmware/201903/media/hero.jpg) right center no-repeat;
background-size:cover;
}

.title_seminar{
margin:20% auto 15px;
padding:20px 0;
background:rgba(0, 0, 0, 0.3);
}

.title_seminar span.seminar_ttl{
font-size:120%;
}

.title_seminar span.seminar_date{
font-size:90%;
}

h2{
font-size:120%;
}

.lead .ttl01,
.lead .ttl02{
font-size:100%;
}

.btn_entry,
.btn_entry_in{
width:90%;
}


.session:before{
content:"";
position:absolute;
top:0;
left:0px;
width:2px;
height:50%;
background-color:#1796d0;
transform:skew(-45deg);
z-index:-1;
}

.session:after{
content:"";
position:absolute;
bottom:0;
right:0px;
width:2px;
height:50%;
background-color:#80c12d;
transform:skew(-45deg);
z-index:-1;
}


.entry_info{
width:84%;
}


}