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

a{color:#ff9922;}

a:hover{color:#7bafd1 !important;}

footer{
margin-top:0;
}


/*anime*/

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

  100% {
    opacity: 1;}
}

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

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

}


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

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

}


@keyframes blue{
  0% {
color:#fff;
}
  100% {
/*color:#003aa3;*/
color:#2153ad;
}
}





@keyframes slideimg{
  0%{
    opacity: 0;
  }
  5%{
    opacity: 1;
  }
  50%{
    opacity: 1
  }
  55%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }

}


.container{
width:100%;
margin:0 auto;
padding:0;
background-color: #94c2e8;
background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
animation: fade 0.5s linear 0.1s forwards;
opacity:0;
}




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

.header-fluid{
padding:3% 15%;
position:relative;
/*background:url(/info/event/domo/202010/media/parts_head.png);
background-repeat:no-repeat;
background-position:center right;*/
animation: fade 0.5s linear 0.5s forwards;
opacity:0;
}

.header-fluid .header-img img{
top:20%;
position:absolute;
right:5%;
opacity: 0;
animation :slideimg 8s linear infinite;
}


.header-fluid .header-img img:nth-child(2){
  animation-delay: 4s;
}



.header-fluid h1{
padding:10px 0;
color:#fff;
font-size:120%;
line-height:1.4;
text-align:center;
float:none;
width:50%;
background-color:#6da1d1;
border-radius:50px;
animation: fade-top 0.3s linear 1.0s forwards;
opacity:0;
}


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


.header-fluid h2 {
font-size: 230%;
line-height: 1.6;
color:#fff;
border: none;
background: none;
animation: fade-top 0.5s 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;
font-weight:bold;
color:#fff;
margin:15px 0 30px;
padding:1% 2%;
border-left:2px solid #fff;
animation: fade 0.5s linear 2.0s forwards, blue 0.8s linear 3.0s forwards;
opacity:0;
}

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




.container-fluid {
margin:0 auto;
padding:0;
position:relative;
background:none;
animation: fade 0.5s linear 1.0s forwards;
opacity:0;
}



.event_summary{
margin:0;
padding:0 15% 13%;
color:#2153ad;
font-size:130%;
font-weight:bold;
line-height:2.0;
background:url(/info/event/domo/202010/media/parts_summary.png) center bottom no-repeat;
background-size:cover;
opacity:0;
animation: fade 0.5s linear 2.0s forwards;
}



.event_session{
margin:0;
padding:5% 15%;
background:url(/info/event/domo/202010/media/parts_session.png) bottom center no-repeat;
background-attachment:fixed;
}


.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 0;
padding-bottom:15px;
color:#fff;
text-align:center; 
font-size:200%;
font-weight:normal;
position:relative;
position:relative;
border-bottom:1px solid #547fa8;
}


.container-fluid h3:after{
content:"";
position:absolute;
bottom:1px;
left:0;
width:100%;
height:1px;
background-color:#fff;
transition:1.3s ease;
transform:scale(0,1);
}

.container-fluid h3.slide:after{
transform:scale(1,1);
}






/*infomation*/

.event_infomation{
padding:3% 15%;
background:url(/info/event/domo/202010/media/parts_infomation.png),#6da1d1;
background-repeat:no-repeat;
background-position:right center;
color:#fff;
font-size:120%;
}

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

.event_infomation dt{
width:50%;
}

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

.container dt{
width:auto;
}





/*session*/


.event_sessiton{
padding:5% 15%;
}

.session_block{
margin:25px auto 45px;
display:flex;
justify-content:space-between;
}


.session_last{
display:block;
}


.session_block .session{
background-color:#fff;
color:#fff;
padding:3%;
width:47%;
box-shadow:0 0 13px #4983af;
}

.session_block .video{
width:88%;
padding:6%;
}


.session_last .session{
width:100%;
}


.session_block .session_agenda{
width:180px;
margin:0 0 30px 0;
padding:10px;
text-align:center;
color:#fff;
font-size:130%;
font-weight:bold;
background-color:#7bafd1;
border-radius:50px;
}


.session_block .session_title {
margin:10px 0 15px 0;
padding:0 0 10px 0 !important;
color:#444;
line-height:1.4;
font-size:180%;
font-weight:normal;
font-weight:bold;
}

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


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



.session_block .company{
font-size:110%;
font-weight:bold;
margin-bottom:10px;
line-height:1.5;
color:#7bafd1;
}


.session_block .name{
font-weight:bold;
font-size:130%;
color:#7bafd1;
}

.session_block .session_talk{
overflow:hidden;
}

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



.session_block .profile{
clear:both;
margin:25px 0 10px;
padding:3px 10px;
border-left:5px solid #7bafd1;
color:#7bafd1;
font-size:120%;
}

.session_block .profile_default{
color:#7bafd1;
font-weight:bold;
font-size:100%;
}

.session_block .profile_open{
    cursor: pointer;
}

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




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


.speaker_block{
display:flex;
justify-content:space-between;
padding:0 5% 0;
}

.speaker_block .speaker{
width:25%;
}

.speaker_block .speaker img{
margin-bottom:10px;
}




/*btn*/

.event_btn{
text-align:center;
}

.event_btn a{
background-color:#fff;
color: #151515;
margin:7% auto 5%;
padding:30px 0;
text-align: center;
text-decoration: none;
border-radius:50px;
font-size:20px;
transition:0.3s;
font-weight:bold;
width:50%;
display:block;
}


.event_btn a.view{
background-color: #ff9922;
color: #fff;
padding:20px 0;
width:80%;
}


.event_btn a:hover {
background-color: #6699cb;
text-decoration:none;
color: #fff !important;
box-shadow:0 0 15px #fff;
transform: scale(1.1);
}

.event_btn a.view:hover{
background-color: #6699cb;
}




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







/*sponsor*/


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

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



.event_sponsored h3{
color:#444;
margin:0 auto 40px;
text-align:center;
border-bottom:none;
}


.event_sponsored h3:after{
content:"";
position:absolute;
bottom:1px;
left:0;
width:100%;
height:1px;
background-color:#a0a0a0;
transition:1.3s ease;
transform:scale(0,1);
}

.container-fluid h3.slide:after{
transform:scale(1,1);
}







/*お問い合わせ*/

.event_contact{
margin:0 auto;
padding:2% 15% 5%;
}



.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:3% auto 5%;
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: #fb660c;
background-color:#fff;
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{
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: 1600px) {

.header-fluid .header-img img{
top:100px;
right:0;
}

.header-fluid{
padding:3% 10%;
}

.event_summary,
.event_infomation,
.event_session,
.event_sponsored{
padding:5% 10%;
}

.event_summary{
padding:0 10% 5%;
}


}


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


.header-fluid{
padding:3% 10%;
}

.header-fluid h1{
width:60%;
}


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

.event_date{
font-size:120%;
}

.header-fluid .header-img img{
max-width:30%;
top:130px;
}

.event_summary,
.event_infomation,
.event_session,
.event_sponsored{
padding:5% 10%;
}


.event_summary{
padding:0 10% 5%;
}



.event_date{
font-size:130%;
}


.event_infomation{
background-size:50%;
}



}






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




/*base*/


#social_bkm_wrap_top{
padding-left:0;
}


/*head*/


.header-fluid{
padding:3% 5%;
}

.header-fluid h1{
width:70%;
}

.header-fluid .header-img img{
max-width:35%;
}



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

.event_date{
font-size:100%;
}



/*summary*/

.event_summary{
padding:0 5% 5%;
background-size:contain;
}


/*infomation*/


.event_infomation{
padding:5%;
font-size:120%;
background-size:50%;
background-position: 120% center;
}



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






/*session*/


.event_session{
padding:0 5%;
}



.session_block{
display:block;
}


.session_block .session{
width:100%;
margin:40px auto;
}



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


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



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



/*btn*/

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



/*当日視聴ページ*/


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



}



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



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


.header-fluid .header-img img{
top:170px;
right:0;
}

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


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


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

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

.event_date em{
font-size:120%;
}

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



.event_btn a.view{
width:100%;
padding:15px;
}




/*session*/


.session_block .session{
display:block;
width:100%;
padding:5%;
}



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

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



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


.session_block .name{
font-size:110%;
}



.speaker_block{
display:block;
padding:0 0 3%;
text-align:center;
}

.speaker_block .speaker{
width:100%;
margin:0 auto;
text-align:left;
}
.speaker_block .speaker img{
float:left;
margin-right:15px;
}




/*btn*/



.event_btn a{
margin:10% auto;
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;
}




}