body{
font-family: Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
background-color:#000;
}

a{color:#fb660c;}

a:hover{color:#fff !important;}

footer{
margin-top:0;
}


/*anime*/

@keyframes fade{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}

@keyframes bottom{
  0% {
    opacity: 0;
transform:translateY(-20px);
}

  100% {
    opacity: 1;
transform:translateY(0);
}

}


.container{
margin:0 auto;
width:100%;
background:url(/info/event/security/202009/media/event_background.jpg) top center no-repeat;
background-size:cover;
background-attachment:fixed;
animation: fade 0.5s linear 0.3s forwards;
opacity:0;
}


#social_bkm_wrap_top {
margin:20px 0 !important;
clear:both;
border:none !important;
}

.header-fluid{
margin:0 15% 5%;
position:relative;
/*background:url(/info/event/security/202002/media/event_header.png), rgba(0,0,0,0.4);*/
/*background:rgba(0,0,0,0.7);*/
background-repeat:no-repeat;
background-position:bottom right;
animation: fade 0.5s linear 1.0s forwards;
opacity:0;
}

.header-fluid h1{
color:#ff762c;
padding-top:5%;
font-size:130%;
float:none;
animation: fade 1.0s linear 1.0s forwards;
opacity:0;
}


.header-fluid h1 img{
margin-right:10px;
height:auto !important;
}


.header-fluid h2 {
font-size: 250%;
line-height: 1.6;
color:#fff;
border: none;
background: none;
animation: fade 1.0s linear 1.3s forwards;
opacity:0;
}

.header-fluid h2 span{
font-size:60%;
display:block;
color:#eee;
}


.event_date {
text-align:left;
font-size:140%;
line-height:1.8;
color:#fff;
margin:15px 0 45px;
animation: fade 0.5s linear 1.6s forwards;
opacity:0;
}

.event_date em{
font-size:160%;
font-style:normal;
}


.event_date span{
color:#ff762c;
font-weight:bold;
}



.container-fluid {
margin:0 auto;
padding:0;
position:relative;
background:none;
/*background:rgba(255,255,255,0.5);*/
/*background:rgba(8,14,20,0.85);*/
animation: fade 0.5s linear 2.0s forwards;
opacity:0;
}




.event_sponcerd{
width:100%;
/*float:right;*/
/*margin-right:4%;*/
}




.event_summary{
margin:0 0 5% 0;
padding:3% 15%;
color:#fff;
font-size:120%;
line-height:1.8;
background:rgba(0,0,0,0.4);
}


.event_summary p{
margin:0 0 20px 0;
}




.event_session{
margin:5% 0;
padding:0 15%;
}


.event_date .pc{
display:block;
padding: 20px 0 10px 0;
text-align:center;
font-size:140%;
color:#ce3d14;
opacity:0;
animation: fade 1s linear 1.0s forwards;
}



.container-fluid h3 {
margin:50px auto 25px;
color:#ff762c; 
border-bottom:none !important;
font-size:200%;
text-align:center;
font-weight:normal;
position:relative;
width:40%;
font-weight:bold;
}


.container-fluid h3:before,
.container-fluid h3:after{
  position: absolute;
  content: '';
  width: 20px;
  height: 50px;
  box-sizing: border-box;
border-top: 1px solid #ff762c;
  border-bottom: 1px solid #ff762c;
}



.container-fluid h3:before{
  top: 0;
  left: 0;
  border-left: 1px solid #ff762c;
}
.container-fluid h3:after{
  top: 0;
  right: 0;
  border-right: 1px solid #ff762c;
}




/*infomation*/

dl.event_infomation{
margin-top:25px;
margin-bottom:60px !important;
padding:5% 20% 0;
color:#fff;
/*background:rgba(10,183,255,0.15);*/
font-size:140%;
}

.event_infomation dt,
.event_infomation dd{
color:#fff;
margin-bottom:15px;
line-height:1.6;
}

.event_infomation dt{
width:30%;
}

.event_infomation dd{
padding-left:20%;
}





/*session*/


.event_sessiton{
padding:5% 15%;
}

.session_table th,
.session_table td{
padding:4% 7%;
background:none;
/*border:1px solid #fff;*/
border:none !important;
background:rgba(0,0,0,0.6);
color:#fff;
}



.session_table td.gray{
background:rgba(0,0,0,0.4);
}

.session_table td.kuniya{
background:rgba(0,0,0,0.2);
}



.session_table .session_agenda{
width:12%;
margin:0 auto 30px;
padding:5px;
text-align:center;
color:#fff;
font-size:100%;
font-weight:bold;
/*background-color:#207265;*/
background-color:#1ca791;
}

.keynote{
background-color:#25a814 !important;
}




.session_table .session_title {
margin:10px 0 15px 0;
padding:0 0 10px 0 !important;
border-bottom:1px dotted #fff;
color:#fff;
line-height:1.4;
font-size:180%;
font-weight:normal;
}

.session_table .session_title span {
display: block;
font-size: 85%;
font-weight: normal;
}


.session_table .session_summary {
letter-spacing: 0;
margin:0 0 40px 0;
font-size:120%;
line-height:1.6;
}



.session_table .company{
font-size:120%;
font-weight:bold;
margin-bottom:10px;
line-height:1.8;
color:#fff;
}


.session_table .name{
font-weight:bold;
font-size:140%;
margin-bottom:20px;
}

.session_table .session_talk{
overflow:hidden;
}

.session_table .talk{
margin-bottom:20px;
margin:0 15px;
width:45%;
float:left;
}



.session_table .profile{
clear:both;
margin:25px 0 10px;
padding:3px 10px;
/*background-color:rgba(0,0,0,0.3);*/
border-left:5px solid #b0b0b0;
color:#b0b0b0;
font-size:120%;
}

.session_table .profile_default{
color:#b0b0b0;
font-size:90%;
}

.session_table .profile_open{
    cursor: pointer;
}

.session_table .profile_detail{
    margin:10px 0 10px 110px;
}




img.pull-left{
margin:0 20px 20px 0;
}




/*btn*/

.event_btn{
margin:0 auto 10%;
text-align:center;
}

.event_btn a{
padding:40px 0;
text-align: center;
text-decoration: none;
transition:0.5s ease;
font-weight:bold;
width:40%;
}

.button{
margin:3% auto 5%;
width:70%;
font-size: 180%;
display:block;
text-align:center;
position: relative;
border-radius: 6px;
color: #fff;
transition: none;
background-color:#fb660c;
}

.button_small{
margin:3% 10px 1%;
padding:1.5%;
width:47%;
font-size:120%;
display:inline-block;
}



.button:hover {
	background-color: #207265;
	text-decoration:none;
	color: #fff !important;
}




.button span{
display:inline-block;
padding:12px 0 3px 0;
text-align:center;
font-weight:bold;
}








/*個人情報*/

.event_personalinfo{
margin:5% 0;
padding:3%;
font-size:85%;
color:#fff;
background:rgba(0,0,0,0.65);
border-radius:3px;
}

.event_personalinfo p{
color:#fff !important;
}




/*present*/

div.present{
width:100%;
margin:20px auto 30px;
padding:10px 0 15px 0;
background-color:#f6e915;
color:#333;
text-align:center;
font-weight:bold;
font-size:18px;
border-radius:5px;
border:2px solid #f6e915;

/*Other Browser*/
background: #f6e915;
/*For Old WebKit*/
background: -webkit-linear-gradient(top, #fbf436 0%, #f6e915 100%);
/*For Modern Browser*/
background: linear-gradient(to bottom, #fbf436 0%, #f6e915 100%);

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); 
}

div.present span{
color:#c51300;
font-weight:bold;
}


/*sponsor*/


.event_sponsored{
width:100%;
margin:0 auto;
padding:1.5%;
background-color:#fff;
}

.event_sponsored .sponsor{
margin:1.5% auto;
padding:0 10%;
text-align: center;
font-size:13px;
display:flex;
flex-wrap: wrap;
justify-content:space-around;
font-size:120%;
}

.event_sponsored .sponsor > div{
width:200px;
}

.event_sponsored h3{
color:#207265;
margin:40px auto 0;
text-align:center;
font-size:200%;
border-bottom:none;
position:relative;
width:40%;
}


.event_sponsored h3:before,
.event_sponsored h3:after{
  position: absolute;
  content: '';
  width: 20px;
  height: 50px;
  box-sizing: border-box;
border-top: 1px solid #207265;
  border-bottom: 1px solid #207265;
}





.event_sponsored h3:before{
  top: 0;
  left: 0;
  border-left: 1px solid #207265;
}

.event_sponsored h3:after{
  top: 0;
  right: 0;
  border-right: 1px solid #207265;
}




/*お問い合わせ*/

.event_contact{
margin:0 auto;
padding:4% 0;
}


.event_contact h3{
color:#fff;
text-align:center;
font-size:160%;
}

.event_contact p{
text-align:center;
margin:10px auto;
color:#fff;
}




/*リンク*/



.info img{
margin:15px auto;
text-align:center;
display:block;
}

.info img:hover{
opacity:0.7;
transition:0.3s ease;
}




/* 当日視聴ページ */


/*.header-webinar{
margin:0 15% 2% !important;
}*/


.view_btn{
margin:0 auto 10%;
text-align:center;
}

.view_btn a{
margin:3% auto 5%;
padding:20px 0;
width:50%;
font-size: 150%;
font-weight:bold;
display:block;
text-align:center;
position: relative;
border-radius:30px;
color: #fff;
background-color:#fb660c;
text-align: center;
text-decoration: none;
transition:0.5s ease;
}

.view_btn a:hover{
background-color: #1ca791;
text-decoration:none;
color: #fff !important;
}


.event_session .session_video{
/*width:100%;
height:500px;*/
margin:25px auto;
color:#050505;
text-align:center;
position: relative;
width: 100%;
padding-top: 56.25%;
}

.event_session .session_video video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





.event_session .session_enq{
padding:3%;
}

.event_session .session_enq a{
margin:3% auto;
padding:20px 0;
width:50%;
font-size: 130%;
display:block;
text-align:center;
border-radius:30px;
font-weight:bold;
color: #fff;
background-color:#1ca791;
text-align: center;
text-decoration: none;
transition:0.5s ease;
}

.event_session .session_enq a:hover{
background-color:#192f2c;
color: #fff;
}

.event_session .session_enq span{
text-align:center;
display:block;
font-size:120%;
margin:0 0 10px 0;
}






/* responsive *************************************************************/

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


/*base*/


#social_bkm_wrap_top{
padding-left:0;
}


/*head*/

.header-fluid{
background-position:right center;
margin:5%;
}



.header-fluid h2{
font-size:160%;
}

.event_date{
font-size:120%;
}


.container-fluid h3,
.event_sponsored h3{
font-size:160%;
}





/*summary*/

.event_summary{
padding:5%;
}


.event_infomation{
padding:5%;
font-size:120%;
}








/*session*/




.event_session{
padding:0 5%;
}

.session_table .session_agenda{
width:15%;
}

.session_table th{
text-align:center;
   font-size:90%;
}



.session_table .session_title{
font-size:20px;
}


.session_table td img{
   max-width:100px;
}



.session_table .profile,
.session_table .profile_default{
margin-left:0;
clear:both;
}


.session_table .close{
width:30%;
}


.session_table .talk{
float:none;
width:100%;
margin-bottom:5%;
}



/*btn*/

.event_btn a{
margin:4% auto;
padding:3%;
width:80%;
font-size:130%;
}





/*当日視聴ページ*/


.view_btn a,
.event_session .session_enq a{
width:70%;
}



}



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

.header-fluid{
background-position:right center;
}


.header-fluid h1{
font-size:100%;
}

.header-fluid h1 img{
display:block;
}


.header-fluid h2{
line-height:1.4;
font-size:130%;
}


.container-fluid h3{
font-size:130%;
margin:15% auto 10%;
padding-top:15px;
width:80%;
}

.event_date,
.event_summary{
font-size:100%;
}

.event_date span{
display:block;
}

dl.event_infomation{
font-size:100%;
padding:3%;
}

.event_infomation dd{
padding-left:10%;
}




/*session*/


.session_table th, .session_table td{
display:block;
width:100%;
padding:5%;
}

.session_table .session_agenda{
width:30%;
margin:0 auto;
}

.session_table .close{
width:50%;
} 

.session_table .session_title{
font-size:140%;
}

.session_table .session_summary{
font-size:100%;
}


.session_table .session img{
max-width:100px;
}

.session_table .company{
font-size:90%;
}


.session_table .name{
font-size:100%;
}



/*btn*/

.event_btn a{
padding:5% 3%;
font-size:120%;
font-weight:bold;
}

.button_small{
margin:15px auto !important;
}



/*当日視聴ページ*/

.view_btn a{
width:90%;
font-size:120%;
padding:15px 0;
}

.event_session .session_enq a{
width:90%;
font-size:120%;
padding:15px 0;
}




}