@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

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

footer{margin-top:0;}

.container {
  width: 100%;
  position:relative;
  font-family: "Arimo", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
  color:#151515;
}


.container-fluid {
  max-width: 1050px;
  margin: 0 auto;
  padding:45px 0;
  position:relative;
  z-index:100;
background:none;
}


#social_bkm_wrap_top {
margin-bottom: 0;
height: auto;
border: none;
}




/* head ******************************************************************************/


.event-hero{
  position: relative;
  margin: 0 auto;
  padding:0;
  height: 600px;
  z-index:1;
  background: linear-gradient(0deg, rgba(44,60,218,1) 0%, rgba(100,106,232,1) 100%);
}

.event-hero::before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/head_img.png) left center no-repeat;
opacity:0.5;
}


.event-hero::after{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/hero_img.png) right bottom no-repeat;
}


.event-title{
  padding:0 5%;
  position:relative;
  display:flex;
  flex-direction: column;
  justify-content: center;
  height:600px;
}

.event-title .eng-title{
  margin:0 0 25px 0;
  font-size:2rem;
  font-weight:bold;
  color:#fff;
  text-align:left;
text-shadow:0 0 15px #151515;
position:relative;
z-index:10;
}


.event-title h1{
  font-size:1.75rem;
  color:#fff;
  width:fit-content;
  line-height:1.2;
  position:relative;
  font-family: "Arimo", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
  /*opacity:0;
  animation: fade 0.5s linear 0.3s 1 forwards;*/
}

.event-title h1 span{
  display:block;
display:block;
margin:0 0 10px 0;
padding:10px 15px;
width:fit-content;
position:relative;
z-index:1;
}


.event-title h1 span::before{
content:"";
position:absolute;
top:0;
left:0;
/*background:rgba(44,60,218,0.5);*/
background:rgba(0,0,0,0.85);
width:0;
height:100%;
border-radius:10px;
z-index:-1;
animation: line 0.3s linear 0.5s forwards;
}

.event-title h1 span:nth-child(2)::before{
animation: line 0.3s linear 1s forwards;
}

.event-title h1 span:nth-child(3)::before{
animation: line 0.3s linear 1.3s forwards;
}



.info-date {
    margin: 20px 0 0 0;
    padding: 10px 20px;
    font-size: 1.25rem;
    text-align: center;
    background:rgba(255,255,255,0.2);
border:1px solid #fff;
    color: #fff;
    width: fit-content;
    z-index: 10;
border-radius:10px;
}


.info-date span{
  line-height:1.2;
font-weight:600;
  position:relative;
  opacity:0;
  animation: fade 0.5s linear 0.5s 1 forwards;
}

.info-date span b{
  font-size:200%;
  font-weight:normal;
}


.event-summary {
padding: 0 25px;
background-color:#151515;
box-sizing:border-box;
}


.event-summary p {
font-size: 16px;
/*font-weight:bold;*/
line-height: 2.0;
color:#fff;
padding: 5px 0;
}



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

  100% {
    opacity: 1;}
}

@keyframes line{
0%{
width:0;
}
100%{
width:100%;
}
}




/* h2 ******************************************************************************/


h2 {
  margin:0 auto 7%;
  padding:30px 50px;
  text-align:center;
  background-color:#151515;
  color: #646ae8;
  font-weight:600;
  font-size: 1.75rem;
  line-height:1.3;
  /*box-shadow:0 0 15px #e0e0e0;*/
border-radius:25px;
  width:fit-content;
  position: relative;
  z-index:10;
}

h2.session,
h2.register,
h2.company{
  margin:-10% auto 7%;
}


h2.contact{
  margin:0 auto 15px;
}


h2 span{
  text-align:center;
  display:block;
  color:#fff;
  font-size:1.25rem;
font-family: "Arimo", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
}




/* overview ******************************************************************************/


.event-overview{
background-color:#fff;
padding-bottom:45px;
font-family: "Arimo", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
position:relative;
overflow:hidden;
}

.event-overview:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_left.png) left top no-repeat;
}

.event-overview:after{
content:"";
position:absolute;
bottom:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_right.png) right bottom no-repeat;
}


.overview-inner {
    margin: 40px 0 0 0;
    padding: 25px;
    background-color:#fff;
    border: 1px solid #e5e5e5;
    border-radius:20px;
    font-size: 16px;
    overflow: hidden;
}


.event-overview dl dt{
width:18%;
margin:0;
padding:10px;
font-weight:normal;
position:relative;
}



.event-overview dl dd {
line-height: 1.5;
padding:10px 15px 10px 12%;
}

.event-overview dl dd span{
display:block;
margin:0 0 5px 0;
}




.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 30px);
}

.fade-in-down {
  transform: translate(0, -30px);
}

.fade-in-left{
  transform: translate(-70px, 0);
}
.fade-in-right {
  transform: translate(70px, 0);
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}


/* session ******************************************************************************/


.event-session{
font-size:1rem;
  line-height:1.4;
  background-color:#f5f4f2;
  padding-bottom:7%;
position:relative;
}


.event-session::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_session.png) center bottom no-repeat;
background-size:cover;
}



.session-schedule{
  margin-top: 65px;
  background-color:#fff;
  border-radius:20px;
  box-shadow:0 0 30px #cccccc;
  position:relative;
}


.session-schedule .session-theme{
position:absolute;
top:-25px;
left:-25px;
background-color:#fff;
color:#646ae8;
border-radius:10px;
padding:50px 25px;
text-align:center;
box-shadow:0 0 15px #d0d0d0;
font-size:1.5rem;
width:fit-content;
}


.session-table th,
.session-table td {
  /*vertical-align:center;*/
  line-height:1.5;
  font-weight:normal;
  border:none;
}

.session-table th{
  background-color:#646ae8;
  /*background: linear-gradient(0deg, rgba(100,106,232,1) 0%, rgba(71,77,207,1) 100%);*/
}


.session-table td{
  padding: 40px;
  position: relative;
}

.session-table .session-time{
padding:20px 0;
text-align:center;
color:#fff;
font-size:1.5rem;
border-radius:20px 20px 0 0;
}


.session-table td .session-title {
  margin: 0 auto;
  padding: 0 0 25px 0;
text-align:center;
  font-size: 1.5rem;
  font-feature-settings: "palt" 1;
}


.session-table td .session-title span{
  font-size:80%;
  display:block;
}


.session-table td .session-summary {
  letter-spacing: 0;
  font-size:90%;
  line-height:1.8;
  color:#5c5e7a;
}




.session-table td.session .session-profile {
  margin:0;
  padding: 25px 0;
  clear: both;
  font-size:1rem;
  width:100%;
}

.session-table td.session .profile_thumb {
  float: left;
  width: 150px;
  margin: 0 16px 16px 0;
}

.session-table td.session .profile_thumb img{
  border:1px solid #e5e5e5;
}s

.session-table td.session .profile_name {
  line-height: 1.6;
}

.session-table td.session .profile_accordion {
margin: 16px 0 0 165px;
line-height: 1.6;
font-size:14px;
}

.session-table td.session .js-profile-trigger {
  position: relative;
  display: inline-block;
  padding:5px;
  border:1px solid #151515;
  font-size:13px;
  text-align:center;
  cursor: pointer;
border-radius:5px;
line-height:1;
}


.session-table td.session .js-profile-trigger:hover{
  background-color:#f0f0f0;
  transition:0.3s;
}


.session-table td.session .js-profile-detail {
  padding-top: 8px;
  font-size:14px;
  color:#5c5e7a;
}




td.session .label-position{
width:fit-content;
padding:5px 10px;
background-color:#0096d6;
color:#fff;
text-align:center;
font-size:13px;
line-height:1;
margin:0 0 15px 0;
}


/* 登壇企業 ******************************************************************************/



.event-company{
background-color:#fff;
padding-bottom:45px;
font-family: "Arimo", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
position:relative;
}

.event-company::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_left.png) left top no-repeat;
}

.event-company::after{
content:"";
position:absolute;
bottom:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_right.png) right bottom no-repeat;
}

.event-company img{
margin:0 auto 45px;
text-align:center;
border-radius:10px;
box-shadow:0 0 20px #d0d0d0;
display:block;
}





/* entry ******************************************************************************/

.event-register {
  background: linear-gradient(0deg, rgba(44,60,218,1) 0%, rgba(100,106,232,1) 100%);
  position:relative;
  /*overflow:hidden;*/
}

.event-register::before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_register.png) right top no-repeat;
background-size:cover;
}


.privacy-note {
  margin:0 0 48px 0;
  padding: 24px;
  font-size: 12px;
  background-color:#fff;
border-radius:20px;
}

.privacy-note p{
  padding-bottom:5px;
}

.privacy-note a{
  color:#0090cd;
}

.privacy-note .privacy-title{
  text-align:center;
  color:#444;
  font-weight:bold;
}




/**** btn ****/

.btn-register{
margin:45px auto;
text-align: center;
}

.btn {
display: inline-block;
font-size: 16px;
line-height: 20px;
/*background-color: #1c2cbe;*/
background-color:#f9df07;
color: #151515;
text-align: center;
vertical-align: middle;
text-decoration:none;
cursor: pointer;
border-radius: 50px;
position:relative;
transition:0.5s;
}


.btn:hover {
  /*background-color: #646ae8;*/
background-color:#fff79a;
  color: #151515 !important;
  box-shadow:0 0 15px #999;
}


.btn::before,
.btn::after {
	box-sizing: border-box;
	transition: all .3s;
}

.btn::before{
content:"";
position:absolute;
top:40%;
right:35px;
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px;
border-top: 3px solid #151515;
border-right: 3px solid #151515;
transform:translateX(0) rotate(45deg) ;
z-index:10;
}

.btn:hover::before{
transform-origin:center center;
transform:translateX(15px) rotate(45deg) ;
}




.btn span{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-weight:bold;
font-size:1.5rem;
}



.large{
width: 80%;
height: 100px;
font-size: 24px;
}

.small{
width: 60%;
height: 80px;
font-size: 20px;
}






.privacy-area {
    border: 1px solid #ccc;
    margin: 50px auto 0;
    padding: 16px;
    height: 150px;
    overflow: auto;
}
.privacy-area p.content {
    font-size: 80%;
    margin: 15px auto;
    text-align: center;
}
.privacy-area p {
    font-size: 50%;
    line-height: 2.0;
}



.event-inquiry{
background-color:#151515;
color:#fff;
text-align:center;
padding-bottom:25px;
position:relative;
z-index:10;
}

.event-inquiry a{
color:#5397fd;
}







/* sponsor ******************************************************************************/


.sponsor {
background-color: #fff;
padding:40px 0 0 0;
text-align:center;
}


.sponsor h3{
font-size:1.75rem;
font-weight:normal;
border-bottom:1px solid #151515;
margin:0 auto;
padding-bottom:25px;
width:fit-content;
}

.sponsor div{
text-align:center;
margin:0 auto 40px;
}

.sponsor div:last-child{
margin:0 auto;
}


.sponsor div a{
display:inline-block;
padding:20px 45px;
}







/*--------------------------------------------------------------------------

 視聴ページ & 動画再生ページ

---------------------------------------------------------------------------*/


.event-hero.webinar-hero,
.webinar-hero .event-title{
height:250px;
}

.event-hero.webinar-hero:after{
background-size:contain;
top:0;
right:30px;
}

.webinar-hero .eng-title,
.webinar-hero h1{
font-size:1.25rem;
}


.event-summary.webinar-summary p {
  line-height:1.6;
}



h2.view{
  margin:-4% auto 0;
}


.video-block{
  margin:0 auto;
background-color:#f5f4f2;
position:relative;
}


.video-block::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(/info/event/okta/202407/media/bg_parts_session.png) center bottom no-repeat;
background-size:cover;
}



.video {
  width:100%; 
  padding:45px 25px;
}


.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  background-color:#ccc;
}
.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video a{
  color:#000;
  font-weight:bold;
}


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

.link-banner span{
  margin:10px 0 0 0;
  font-size:12px;
  color:#666;
  max-width:500px;
  display:block;
}

.link-banner img:hover{
  opacity:0.85;
  transition:0.3s;
}

.enq-text{
color:#151515;
margin-bottom:15px;
font-size:16px;
font-weight:bold;
line-height:1.5;
}

.support{
text-align:center;
color:#666;
margin:25px auto;
}
.support a{
color:#3f45cb;
}




/* responsive 
------------------------------------------------------------------------------------------------------------- */


@media (max-width: 960px) {


.container {
background-size:cover;
}


.event-hero::after{
background-position:50% center;
background-size:cover;
}



.event-title .eng-title,
.event-title h1 .ttl-main{
font-size:1.5rem;
line-height:1.4;
}
.event-title h1 .ttl-sub{
font-size:1.25rem;
}

.container-fluid{
padding:20px;
}


.event-overview::before,
.event-overview::after{
background-size:cover;
}


.event-hero.webinar-hero{
height:250px;
background-size:cover;
}




@keyframes slide{
  0% {
    opacity: 0;
width:0;
}

  100% {
    opacity: 1;
width:100%;
}
}


.info-date{
font-size:1.25rem;
background:rgba(255,255,255,0.6);
color:#151515;
}


.large, .small{
width:90% !important;
margin:10px auto 30px;
}





table th, table td{
width:100%;
display:block;
}


.session-table {
width: 100%;
}

.session-table td{
padding:15px;
}


.session-table .ttl-session{
padding:15px 10px;
width:100%;
}





/*視聴＆動画ページ*/


.event-hero.webinar-hero:after{
background-position:right top;
}

h2.view{
  margin:0 auto;
}


.video-block{
padding:25px 0;
}

.video {
width: 100%;
padding:20px 0;
}


.link-banner{
display:block;
max-width:500px;
}

.link-banner img{
margin:0 auto;
display:block;
}


.link-banner span{
margin:10px 15px 25px;
}





}




@media (max-width: 640px) {


.container-fluid {margin: 0;}


.event-hero,
.event-title{
height:450px;
}

.event-hero::after{
display:none;
}


.event-title h1{
font-size:1.25rem;
}


.info-date{
font-size:1rem;
}

.event-summary{
padding:15px;
}



.event-overview .overview-inner{
padding:15px;
}

.event-overview dl dt{
width:100%;
border-left:1px solid #e5e5e5;
}

.event-overview dl dd{
margin:0;
padding:25px 0;
clear:both;
}


.information dt {
    clear: both;
    width: auto;
    float: none;
    font-weight: bold;
    margin: 0 0 10px;
    width: auto;
}


h2{
font-size:1.5rem;
}

h2.session,
h2.register,
h2.company{
  margin:-20% auto 10%;
}


.session-schedule .session-theme{
padding:20px 15px;
font-size:1rem;
}


.session-schedule .session-time{
font-size:1.25rem;
}


.session-table td .session-title{
font-size:1.25rem;
text-align:left;
}


.session-table td.session .profile_thumb{
float:none;
}

.session-table td.session .profile_accordion{
margin:16px 0 0 0;
}


.session-table td.session .profile_name,
.session-table td.session .profile_detail {font-size: 14px; line-height: 1.5;}


.btn span{
font-size:1.25rem;
}


.btn:before,
.btn:after{
display:none;
}

.event-hero.webinar-hero .eng-title,
.event-hero.webinar-hero h1{
font-size:1.25rem;
}



.btn-register{
margin:20px 0;
}


}






/* ヘッダー＆フッター広告表記 2024～
-------------------------------------------------------------------------------------------------------*/


.header_sponsored_area{
    width:100%;
    background-color:#fff;
    color:#000;
    font-size:14px;
    text-align:right;
    padding:15px 20px;
    position:relative;
    z-index:1000;
}

.header_sponsored_area span{
    margin:0;
    line-height:1.3;
    display:block;
}


.block_sponsored_area{
    clear:both;
    background-color:#fff;
    color:#000;
    font-size:14px;
    border:1px solid #000;
    margin:25px auto;
    padding:15px 15px 10px;
    max-width:760px;
    position:relative;
    z-index:1000;
}

.block_sponsored_area span{
    margin:5px 0;
    text-align:left;
    display:block;
}


.block_sponsored_area:before{
    display: block;
    content: "PR";
    position: absolute;
    top: -12px;
    left: 30px;
    width: 40px;
    height: 30px;
    text-align: center;
    background-color: #fff;
}