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

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;
overflow: hidden;
}




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

.header-fluid{
position: relative;
padding:3% 15%;
animation: fade 0.5s linear 0.5s forwards;
opacity:0;
}

.header-fluid::before,
.header-fluid::after {
  content: "";
  position: absolute;
  top: calc(50% - 250px);
  right: -100px;
  display: block;
  width: 500px;
  height: 500px;
  border-radius: 50%;
}
.header-fluid::after {
  background: url(/info/event/tanium/202109/media/hero.jpg) no-repeat center center;
}

.header-fluid::before {
  top: calc(50% - 350px);
  right: 150px;
  background-image: repeating-radial-gradient(ellipse at center, rgba(204,204,204,.3) 0%,rgba(204,204,204,.3) 49%,rgba(204,204,204,0) 49%,rgba(204,204,204,0) 100%);
    background-size: 8px 8px;
    background-position: top left;
}


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



.header-fluid h2 {
position: relative;
z-index: 5;
font-size: 230%;
color: #333;
line-height: 1.6;
border: none;
background: none;
animation: fade-top 0.5s linear 1.3s forwards;
opacity:0;
font-feature-settings: "palt" 1;
}

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


.event_date {
position: relative;
z-index: 5;
text-align:left;
font-size:140%;
line-height:1.8;
font-weight:bold;
color:#A72D36;
margin:15px 0 30px;
padding:1% 2%;
border-left:2px solid #A72D36;
animation: fade 0.5s linear 2.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 {
  position: relative;
  padding: 80px;
  background: #f5f5f5;
}

.event_summary::before  {
  content: "";
  position: absolute;
  top: -150px;
  right: 300px;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: repeating-radial-gradient(ellipse at center, rgba(167,45,54,1) 0%,rgba(167,45,54,1) 49%,rgba(167,45,54,0) 49%,rgba(167,45,54,0) 100%);
    background-size: 8px 8px;
    background-position: top left;
}


.event_summary p {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 16px;
font-size:100%;
font-weight:bold;
line-height:2.0;
}



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


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


.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{
position: relative;
padding:3% 15%;
font-size:120%;
overflow: hidden;
}

.event_infomation::before  {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: repeating-radial-gradient(ellipse at center, rgba(167,45,54,1) 0%,rgba(167,45,54,1) 49%,rgba(167,45,54,0) 49%,rgba(167,45,54,0) 100%);
    background-size: 8px 8px;
    background-position: top left;
}

.event_infomation dt,
.event_infomation dd{
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;
padding:3%;
width:47%;
}

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


.session_last .session{
width:100%;
}


.session_block .session_agenda{
display: inline-block;
margin: 0 0 30px 0;
padding:10px 20px;
text-align:center;
color:#fff;
font-size:130%;
font-weight:bold;
background-color:#A72D36;
}


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


.session_block .name{
font-weight:bold;
font-size:130%;
}

.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 #A72D36;
font-size: 100%;
}
.session_block .profile .js-profile-trigger:hover {
  cursor: pointer;
}
.session_block .profile .js-profile-detail {
  padding-top: 16px;
}

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


.speaker_block .speaker {
  display: flex;
  align-items:  flex-start;
}
.speaker_block .speaker img {
width: 120px;
margin: 0 24px 10px 0;
flex-shrink: 0;
}




/*btn*/

.event_btn{
text-align:center;
}

.event_btn a{
background-color:#A72D36;
color: #fff;
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: #444;
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;
}



/*個人情報*/
/*.note {
    height: 200px;
    overflow-y: scroll;
    padding: 16px 24px;
    background: rgba(255,255,255,.8);
}
*/
.note h3 {
  font-size: 1rem !important;
  margin: 0 0 16px !important;
}
.note dt {
  float: none;
  width: 100%;
}
.note dd {
  margin: 0 0 10px;
  font-size: .75rem;
}
.note p {
  font-size: .75rem;
}


/*sponsor*/


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

.event_sponsored .sponsor{
margin:0 auto 40px;
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;
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%;
background: #f5f5f5;
}



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




/*リンク*/
.info img{
margin:15px auto;
text-align:center;
display:block;
}

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




/* 当日視聴ページ */
.video {
    max-width: 800px;
    width: 90%;
    margin: 24px auto 48px;
}
.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}
.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}








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


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

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

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

}


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




}


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


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

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

.event_date{
font-size:120%;
}

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


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


.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::before {
  z-index: 3;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: rgba(0,0,0,.5);
  background-size: cover;
}



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

.event_date{
font-size:100%;
color: #fff;
}

.event_summary::before {display: none;}

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


.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 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 {
font-size:90%;
}

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


.event_summary {padding: 80px 24px;}
.event_infomation{
font-size:100%;
padding:3%;
}

.event_infomation::before {display: none;}

.event_infomation dt {
  width: 100%;
  margin-bottom: 6px;
}
.event_infomation dd {padding-left: 0; margin-left: 0;}

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




/*session*/
.event_session {padding: 3%;}

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



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

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

.speaker_block .speaker img {width: 60px;}

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




}