@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');



/* base ******************************************************************************/

body {
    position: relative;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #151515;
    font-family: 'Share Tech', "Noto Sans JP", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: break-word;
    vertical-align: baseline
    background-color:#fff;
}

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

.container{
position:relative;
width:100%;
}

.container::before{
content:"";
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/security/202602/media/img_kv.jpg) center top no-repeat;
background-size:cover;
z-index:-1;
}


.container-fluid {
max-width: 900px;
margin: 0 auto;
padding:0;
background:transparent;
}

.container-fluid a{
color:#f4593f;
}

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

.notice{
text-align:center;
color:#fff;
}




/* header ******************************************************************************/



.event-header{
width:100%;
padding:0;
position:relative;
}


.event-header .header-inner{
max-width:100%;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin: 0 auto;
padding:5% 15px;
/*backdrop-filter: blur(2px);*/
/*text-shadow:0 2px 20px #000;*/
position:relative;
z-index:10;
}


.event-header .ttl-headline{
font-size:clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
font-family: 'Share Tech', sans-serif;
margin:0 auto;
padding:0 0 10px 0;
width:fit-content;
text-align:center;
line-height:1.2;
position:relative;
opacity:0;
animation: fade-in 1s ease-out 0.2s forwards;
z-index:1;
}

.event-header .ttl-headline::before{
content:"";
position:absolute;
bottom:-15px;
left:calc(50% - 150px);
width:300px;
height:2px;
background-color:#e154ff;
opacity:0;
animation: line 0.8s ease-out 0.5s forwards;
z-index:10;
}

@keyframes fade-in{
0%{
opacity:0;
}
100%{
opacity:1;
}
}

@keyframes line{
0%{
opacity:0;
transform:scaleX(0);
}
100%{
opacity:1;
transform:scaleX(1);
}
}


.event-header h1{
position: relative;
z-index:100;
display:flex;
justify-content:space-around;
align-items:center;
font-size:clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
font-family: 'Share Tech', "Noto Sans JP", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
line-height:1.5;
text-align:left;
width:fit-content;
margin:5% auto;
opacity:0;
animation: fade-in 1s ease-out 0.7s forwards;
}


.event-header .info-date {
margin:0 auto;
padding:15px 25px 10px;
/*border-top:1px dashed #fff;
border-bottom:1px dashed #fff;*/
background:rgba(0,175,248,0.8);
font-size:clamp(1.25rem, 0.917rem + 0.83vw, 1.75rem);
font-weight:bold;
font-family: 'Share Tech', "Noto Sans JP", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
line-height:1.2;
text-align:center;
width:fit-content;
position:relative;
opacity:0;
animation: fade-in 1s ease-out 0.9s forwards;
z-index:1000;
}


.event-header .info-date strong{
font-size:170%;
}


.event-summary{
max-width:900px;
margin:0 auto;
padding:15px;
/*box-shadow:0 20px 20px -10px #252525;*/
position:relative;
z-index:10;
}



.event-summary p {
margin:0 auto;
font-size:clamp(1rem, 0.833rem + 0.42vw, 1.25rem);
/*font-weight:bold;*/
line-height: 1.8;
padding: 5px;
color:#fff;
font-family: 'Share Tech', "Noto Sans JP", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
position:relative;
z-index:10;
}




/* 開催概要 ******************************************************************************/


.event-outline{
position:relative;
margin:0 auto;
padding-bottom:65px;
max-width:90%;
}

 

table.information {
margin:45px auto 0;
padding:0;
border:none !important;
backdrop-filter: blur(8px);
/*box-shadow:0 10px 10px -5px #a0a0a0;*/
font-size: 1.125rem;
font-family: Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
color:#fff;
position:relative;
z-index:100;
}

table.information th,
table.information td{
text-align:left;
/*background:rgba(255,255,255,0.95);*/
border: 2px solid #fff;
/*box-shadow:0 0 10px #ccc;*/
padding:15px;
font-weight:normal;
position:relative;
z-index:10;
}

table.information th.last,
table.information td.last{
border-bottom:none !important;
}


table.information th{
width:28%;
background:none;
position:relative;
}

table.information td{
border-right:2px solid #fff;
}



.event-outline table.fade-in{
transform:translateY(0);
opacity:1;
}


.event-outline .notice{
margin:20px auto 0;
}



/* 見出し ******************************************************************************/


h2 {
text-align:center;
margin:0 auto;
padding:40px 0 0;
color: #fff;
font-family: 'Share Tech', Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
font-size:clamp(2.5rem, 1.167rem + 3.33vw, 4.5rem);
font-weight:normal;
border: none;
width:fit-content;
position: relative;
z-index:10;
}

h2::first-letter{
color:#009cdd;
font-size:150%;
}

h2 span{
font-size:1.25rem;
margin:10px 0;
padding-top:15px;
/*font-weight:bold;*/
font-family: 'Share Tech', "Noto Sans JP", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
position:relative;
width:100%;
display:block;
}

h2 span::before{
content:"";
position:absolute;
top:-5px;
left:0;
width:100%;
height:1px;
background-color:#fff;
border-radius:10px;
}

h2.session,
h2.inquiry{
color:#151515;
}


h2.session span::before,
h2.inquiry span::before{
background-color:#151515;
}



/* 講演内容 ******************************************************************************/


.event-session{
margin:5% auto;
background:url(/info/event/security/202602/media/img_session.png) center top no-repeat;
background-size:cover;
position:relative;
}

.event-session::before{
  position: absolute;
  content: '';
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background:url(/info/event/security/202602/media/img_session.png) 0 0 no-repeat;
  transform: skewY(-3deg);
  transform-origin: bottom left;
z-index:-1;
}

.event-session::after{
  position: absolute;
  content: '';
  left:0;
  top:100%;
  width: 100%;
  height: 100px;
  background-color: #fff;
  transform: skewY(-3deg);
  transform-origin: top left;
z-index:-1;
}

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

.event-session::after{
  height: 50px;
}

}




.event-session-main{
margin:0 auto;
width:90%;
}

.event-session-main .session-container{
margin:0;
/*display:flex;
justify-content:space-between;
gap: 20px;*/
/*flex-wrap:wrap;*/
}


.event-session-main .session-container .main-session-container{
width:100%;
}



.event-session-main .main-date{
/*display:flex;
justify-content:left;
align-items:center;*/
line-height:1.2;
}
.event-session-main .main-date span{
display:block;
margin:5px auto;
text-align:center;
}

.event-session-main .main-date span.date{
font-size:clamp(2.5rem, 0.833rem + 4.17vw, 5rem);
margin-right:20px;
}
.event-session-main .main-date span.time{
font-size:clamp(1.25rem, -0.25rem + 2.5vw, 2.25rem);
}
.event-session-main .main-date span.date small,
.event-session-main .main-date span.time small{
font-size:50%;
}


@media screen and (max-width:640px){
.event-session-main .main-date span.time{
  display:block;
}

}


.event-session-main .session-container.container-row ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.event-session-main .session-container li{
margin:24px 0;
padding:20px;
background-color:#fff;
border: 10px solid transparent;
box-shadow: 0 10px 10px -5px #444;
border-radius:10px;

/* 白い塗り + 枠用グラデーションの二重背景 */
background:
linear-gradient(#fff, #fff) padding-box,/* 中身（白） */
linear-gradient(135deg, #009cdd, #ff85c1) border-box;/* 枠（グラデーション） */
}

.event-session-main .session-container li span{
display:block;
}

.event-session-main .session-container li.main-session{
width:100%;
margin:24px 0 48px;
padding:3%;
}

.event-session-main .session-container li.main-session div{
margin:15px 0;
}


.event-session-main .session-container li.main-session .session-profile-block{
display:flex;
clear:both;
}

.event-session-main .session-container li.main-session .session-profile-block img{
flex-shrink:0;
}


.event-session-main .session-container li.main-session .profile-name{
font-size:clamp(0.9rem, 0.563rem + 0.56vw, 1.125rem);
color:#151515;
}

.event-session-main .session-container li.main-session .profile-name strong{
font-size:120%;
display:block;
}


.event-session-main .session-container li.main-session .js-profile-detail {
  display: none;
margin-top:15px;
font-size:0.9rem;
color:#777;
}



.event-session-main .main-date.all-date{
width:100%;
margin:0 auto;
display:block;
}

.event-session-main .session-container li.sponsor-session{
width:48%;
}

.event-session-main .session-container li.main-session .session-photo{
width:180px;
margin-right:20px;
flex-shrink:0;
}

.event-session-main .session-container li.main-session .session-profile{
font-size:0.8rem;
display:block;
}



.event-session-main .session-container li.sponsor-session .session-number,
.modal__profiles .session-number{
font-size:1.5rem;
/*font-weight:bold;*/
margin:20px 0;
padding:0 10px;
background:#f0f0f0;
border-radius:5px;
}

.event-session-main .session-container li.sponsor-session .session-profile-block{
display:flex;
margin:10px 0;
}

.event-session-main .session-container li.sponsor-session .session-photo{
width:140px;
margin:0 10px 10px 0;
flex-shrink: 0;
}

.event-session-main .session-container li img{
border-radius:10px;
}

.event-session-main .session-container .session-sponsor-title{
  font-size: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  font-weight: bold;
  margin:0 auto 20px;
padding-bottom:5px;
  text-align:left;
  color: #151515;
line-height:1.2;
border-bottom:1px solid #444;
}
.event-session-main .session-container .session-sponsor-title small{
font-size:60%;
}

.event-session-main .session-container .session-label{
font-size:0.9rem;
width:fit-content;
margin:0 0 10px 0;
padding:2px 8px;
background-color:#1558df;
color:#fff;
}

.event-session-main .session-container .session-label.label-keynote,
.event-session-main .session-container .session-label.label-special{
background-color:#a418c2;
color:#fff;
}


.event-session-main .session-container .session-title{
font-size:clamp(1.5rem, 2.5vw, 2.5rem);
font-weight:bold;
line-height:1.5;
}
.event-session-main .session-container .session-title span{
font-size:80%;
display:block;
}
.event-session-main .session-container li.sponsor-session .session-title{/*スポンサーセッションのセッションタイトル*/
font-size:clamp(1.25rem, 0.875rem + 0.63vw, 1.5rem);
}

.event-session-main .session-container .session-profile{
font-size:1rem;
line-height:1.4;
}
.event-session-main .session-container .session-profile strong{/*講演者名*/
font-size:120%;
margin-top:5px;
display:block;
}



.event-session-main .session-container .session-btn a{
display:block;
width:100%;
margin:24px 0 0 0;
padding:10px;
text-align:center;
border-radius:50px;
background-color:#009cdd;
color:#fff;
font-weight:bold;
}

.event-session-main .session-container .session-btn a:hover{
display:block;
width:100%;
background-color:#55cdff;
color:#fff !important;
transition:0.5s;
}


.event-session-sponsor{
margin:8% auto 0;
}


.session-program{
margin:20px auto;
padding:0;
position:relative;
z-index:10;
}


.session-program table{
margin:5% auto;
/*box-shadow:0 0 40px #252525;*/
position:relative;
transform:translateY(80px);
opacity:0;
transition:0.5s ease;
z-index:10;
}

.session-program table.fade-in{
transform:translateY(0);
opacity:1;
}


.session-program th,
.session-program td {
border:none !important;
color:#151515;
}


.session-program th {
width: 10%;
text-align: center;
font-weight:normal;
padding:0;
vertical-align:top;
background:none;
}

.session-program td {
padding:4%;
background-color:#fff;
position: relative;
line-height: 1.3 !important;
box-shadow:0 15px 15px -10px #444;
position:relative;
}


.session-program .session-time{
margin:0 15px 0 0;
padding:50px 20px;
text-align:center;
background-color:#fff;
/*border-radius:50%;*/
font-size:1.25rem;
position:relative;
}

.session-program .session-label{
background-color:#00aaa0;
color:#fff;
font-size:0.85rem;
margin:0;
padding:15px;
text-align:center;
width:fit-content;
}
.session-label.keynote{background-color:#003dc6; color:#fff;}
.session-label.special{background-color:#366bf2; color:#fff;}


.session-program td.session .session-title {
margin: 25px 0;
padding: 0;
border-bottom:1px dotted #fff;
font-size:2rem;
/*font-weight:bold;*/
line-height:1.5;
font-feature-settings: "palt" 1;
}


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


.session-program td.session .session-summary {
letter-spacing: 0;
font-size:1rem;
padding-bottom:25px;
line-height:1.6;
}

.session-program td.session .session_profile {
margin:0;
padding: 25px 0;
clear: both;
font-size:1.25rem;
display:flex;
flex-shrink: 0;
overflow: hidden;
}


.session-program td.session .host-label,
.session-program td.session .guest-label{/*司会 ゲスト*/
width: fit-content;
margin:0 0 10px;
padding: 3px;
background-color: #fff;
border:1px solid #666;
color:#151515;
text-align: center;
font-size:13px;
font-weight:normal;
line-height: 1;
display:block;
}



.session-program td.session .profile_thumb {
margin: 0 24px 4px 0;
flex-shrink: 0;
}

.session-program td.session .profile_thumb img{
/*box-shadow:0 0 20px #e5e5e5;*/
/*border:1px solid #d5d5d5;*/
border-radius:15px;
display:block;
}

.session-program td.session .profile_name {
line-height: 1.5;
font-size:1rem;
}

.session-program td.session .profile_name strong{
font-size:130%;
font-weight: normal;
padding-top:4px;
display:block;
}

.session-program td.session .profile_name .profile_accordion {
margin: 0;
line-height: 1.6;
}

.session-program td.session .profile_name .js-profile-trigger {
position: relative;
display: inline-block;
font-size:0.85rem;
font-weight:normal;
margin:10px 0 0 0;
padding:8px;
background:#cafff9;
color: #151515;
border-radius:10px;
cursor: pointer;
width:fit-content;
font-feature-settings:"palt";
}
.session-program td.session .profile_name .js-profile-trigger:hover{
background:#68e6de;
color:#fff;
transition:0.3s;
}

.session-program td.session .profile_name .js-profile-detail {
padding-top: 10px;
font-size:0.8rem;
font-weight:normal;
line-height:1.6;
color:#505050;
display:block;
}

.event-session .notice{
text-align:center;
font-size:1rem;
color:#151515;
margin:0 auto 45px;
position:relative;
z-index:1000;
}


/* 参加特典 */

.benefits-area{
background-color:#fff;
color:#151515;
margin:0 auto;
padding:40px 20px 20px;
box-sizing:border-box;
border-radius:15px;
max-width:1150px;
box-shadow:0 0 15px #999;
font-family: Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
position:relative;
z-index:1000;
}

.benefits-area::before{
content:"参加特典";
position:absolute;
top:-25px;
left:0;
width:100%;
height:auto;
padding:20px 10px;
background-color:#e154ff;
color:#fff;
text-align:center;
font-size:1.25rem;
font-weight:bold;
border-radius:15px 15px 0 0;
}

.benefits-area p{
margin:15px;
font-size:0.9rem;
}

.benefits-area p.center{
text-align:center;
color:#151515;
border:1px solid #ccc;
font-size:105%;
font-weight:bold;
margin:50px auto 0;
padding:10px;
}

.benefits-area p span{
color:#a418c2;
font-weight:bold;
}

.benefits-area a{
color:#1558df;
}





/* 申し込み ******************************************************************************/


.event-entry{
position:relative;
padding-top:20px;
}

.privacy-note {
margin:0 auto 45px;
padding: 30px;
background-color:#fff;
/*border:1px solid #fff;*/
color:#151515;
font-size: 12px;
font-family: Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
text-align:left;
max-width:950px;
position:relative;
z-index:10;
}

.privacy-note p a{
color:#1558df;
font-weight:bold;
}




/*btn default setting*/



.btn-register {
width: 100%;
margin: 0 auto;
padding:25px 0;
text-align:center;
position:relative;
z-index:10;
}


.btn-entry {
display: inline-block;
box-sizing: border-box;
margin:30px auto;
padding: 8px;
font-weight: bold;
line-height: 20px;
background-color:#e154ff;
color: #fff !important;
text-align: center;
cursor: pointer;
/*box-shadow:0 10px 10px -5px #505050;*/
border-radius:50px;
width: 40%;
position:relative;
z-index:100;
}

.btn-entry:hover{
background-color:#f4acfd;
color: #151515 !important;
/*transform:translateY(-5px);*/
transition:0.3s;
}


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

.btn-entry.btn-style{
width:100%;
height:70px;
}




/* sponsor logo ******************************************************************************/


.event-sponsor {
margin:0 auto;
padding:0;
position:relative;
z-index:10;
}

.event-sponsor h3 {
margin: 20px auto;
padding:10px 5px;
text-align: center;
color: #fff; 
border-top:1px solid #fff;
border-bottom:1px solid #fff;
font-size: 1.25rem;
font-weight:normal;
width:fit-content;
}

.event-sponsor ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin:0 auto 25px;
}

.event-sponsor li {
width: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color:#fff;
margin:25px 15px;
padding:0 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;
}



/* inquiry ******************************************************************************/

.event-inquiry{
text-align:center;
padding-bottom:45px;
/*background-color:#f4cbd3;*/
/*background:linear-gradient(90deg, #fff, #f9c5f5) border-box;*/
/*background: linear-gradient(to right, #e0f7fa, #fce4ec);*/
background: linear-gradient(135deg, #d0f0ff 0%, #fce4ec 50%, #fff0f5 100%);
color:#444;
position:relative;
}


.event-inquiry p{
margin:10px 0 0 0;
position:relative;
z-index:10 !important;
}

.event-inquiry p a{
color:#099dfb;
font-weight:bold;
}

footer{
margin-top:0;
position:relative;
z-index:10;
}









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



@media (max-width: 960px) {

.container-fluid,
.event-header{
padding:0 15px;
}

.event-header h1{
margin:50px 0;
}

.event-session-main .session-container{
display:block;
}

.event-session-main .session-container .main-session-container{
width:100%;
}

.event-session-main .session-container.container-row{
display:flex;
}

.event-session-main .session-container li{
margin:0 0 45px 0;
width:100%;
}

.event-session-main .session-container li.main-session{
width:100%;
}

.event-session-main .session-container.container-row div{
margin-bottom:10px;
}
.event-session-main .session-container.container-row ul{
display:flex;
flex-wrap:wrap;
}

.event-session-main .session-container.container-row ul li{
width:100%;
}


.event-session-main .session-container li.main-session .session-photo{
width:140px;
}


/*.event-session-main .session-container ul li.sponsor-session{
width:48%;
}*/


.event-sponsor li {
width: 25%;
}

.event-entry{
padding:45px 0 15px;
}


}



@media (max-width: 640px) {


.container-fluid {margin: 0;}


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

.event-header .info-date {
padding:10px;
}


.event-summary{
margin:0 auto;
}

.event-summary p{
padding:0;
}


table.information{
margin:45px auto;
width:95%;
}

table.information th,
table.information td{
width:100%;
display:block;
padding:10px;
}

h2 {
padding:0;
}


.btn-register{
padding:0 10px;
}

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

.event-session-main{
margin:0 auto;
width:97%;
}




.event-session-main .session-container .main-session-container{
width:100%;
}


.event-session-main .session-container.container-row{
display:block;
}

.event-session-main .session-container li.main-session{
display:block;
}

.event-session-main .session-container.container-row ul{
display:block;
}

.event-session-main .session-container.container-row ul li{
width:100%;
}


.event-session-main .session-container li.main-session .session-photo,
.event-session-main .session-container li.sponsor-session .session-photo{
width:100px;
}


.event-session-main .session-container li.sponsor-session{
width:100%;
}






.event-sponsor ul {
display:block;
}

.event-sponsor li{
width:80%;
margin:20px auto;
}


.benefits-area{
margin:10px;
padding:25px 15px;
}
.benefits-area::before{
font-size:1.25rem;
}

.benefits-area p.center{
font-size:90%;
}

.event-inquiry{
padding:45px 0;
}



}





/*************** login page & video page ***************/

.event-header.webinar-header{
padding:2% 0;
}

.event-header.webinar-header .header-inner{
position:relative;
padding:10px 0;
}


.event-header.webinar-header .ttl-headline {
  font-size: 3rem;
}

.event-header.webinar-header h1,
.event-header.webinar-header .ttl-main span.number{
  font-size: 1.25rem;
}


.event-entry.webiner-block{
padding:0;
}


.video_block{
position:relative;
}




.video {
  width:100%; 
  margin: 40px auto 20px;
}
.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
z-index:100;
}
.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video_block p{
position:relative;
z-index:100;
}


.video_block p a{
color:#0c16ea;
font-weight:bold;
}


.enq-text{
padding:20px 10px;
font-size:1.25rem;
font-weight:bold;
}

.support{
text-align:center;
padding:20px 0;
}


.closed-text{
color: #151515;
font-weight: bold;
font-size:120%;
text-align:center;
padding: 40px 0;
text-align:center;
position:relative;
z-index:10;
}





@media (max-width: 640px) {


.enq-text{
padding:20px 10px;
font-size:1rem;
}

.event-header.webinar-header .header-inner{
padding:10px;
}
.event-header.webinar-header .ttl-headline {
  font-size: 2rem;
}

.event-header.webinar-header h1{
  margin:15px 0;
}

.event-header.webinar-header h1,
.event-header.webinar-header .ttl-main span.number{
  font-size: 1rem;
}


}





/* modal window css ******************************************************************************/


/* ================================
 * Modal — Base
 * ================================ */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.is-open { display: flex; }


.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}

/* ================================
 * Modal — Container（カードのグラデボーダーを踏襲）
 * ================================ */

#sessionModal .modal__container {
  position: relative;
  z-index: 20;
margin-top:5%;

  /* サイズ */
  width: 90%;
  width: 100%;/*modal__frameで1450pxを指定*/
  max-height: 90vh;
  overflow-y: auto !important;
  padding: 32px;
  border-radius: 10px;
  box-shadow: 0 10px 10px -5px #444;
  border: 15px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #009cdd, #ff85c1) border-box;

  /* === Gridレイアウト === */

display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas:
    "sponsor"
    "label"
    "title"
    "summary"     /* ← これは従来の #modalSummary（タイトル直下用／残す） */
    "sessionnum"  /* ← ここからご指定の順 */
    "talktitle"
    "talksummary"
    "profiles";
  row-gap: 12px;

}

@media (max-width: 640px) {
  #sessionModal .modal__container{
      padding: 16px;
  }
}


/* エリアの割当（IDはそのまま） */
#modalSponsorTitle { grid-area: sponsor; }
#modalLabel        { grid-area: label; }
#modalTitle        { grid-area: title; }
#modalSummary      { grid-area: summary; }
#modalSessionNumber{ grid-area: sessionnum; }
#modalTalkTitle    { grid-area: talktitle; }
#modalTalkSummary  { grid-area: talksummary; }
#modalProfiles     { grid-area: profiles; }

/* session-number はカードの見た目をそのまま継承したいので同クラスを付与して使う */
#modalSessionNumber {
  /* ここでは “余計な上書きはしない” 方針。
     カードCSSの .session-number が効くように、JSでクラス session-number を付与します。*/
}


.modal__talk-title{
font-size:clamp(1.25rem, 0.125rem + 1.88vw, 2rem);
font-weight:bold;
margin:10px 0;
}

.modal__talk-summary{
font-size:clamp(0.9rem, 0.563rem + 0.56vw, 1.125rem);
}



/* ================================
 * Modal — ヘッダー要素
 * ================================ */
.modal__sponsor-title {
  grid-area: sponsor;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}
.modal__sponsor-title.session-sponsor-title {
  margin: 0 0 15px;
  padding-bottom: 5px;
  font-size:clamp(1.25rem, 0.5rem + 1.25vw, 1.75rem);
  border-bottom: 1px solid #444;
line-height:1.5;
width:fit-content;
}

.modal__label {
  grid-area: label;
  display: inline-block;
  font-weight: bold;
  margin-bottom: 10px;
}
.modal__label.session-label {
  background-color: #1558df;
  color: #fff;
  padding: 2px 8px;
  display: inline-block;
  margin: 0;
  font-size: 1.125rem;
  /* ご要望: カードと同様に内容幅にフィット */
  width: -moz-fit-content;
  width: fit-content;
}

.modal__title {
  grid-area: title;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.5;
  margin: 6px 0 12px;
  white-space: pre-line; /* \n を改行表示 */
}

/* ================================
 * Modal — サマリー（タイトル直下）
 * ================================ */
.modal__summary {
  grid-area: summary;
  line-height: 1.7;
  white-space: pre-line;
font-size:clamp(0.9rem, 0.563rem + 0.56vw, 1.125rem);
}



/* ================================
 * Modal — セッション番号（カードと同クラスを使う）
 * ================================ */
#modalSessionNumber {
  grid-area: sessionnum;
}

/* ================================
 * Modal — 講演タイトル／サマリー（モーダル専用）
 * ================================ */

/* 見出しの削除 → タイトル＆サマリーは本文だけ出すので、見出し用スタイルを使わない */
.modal__talk-title,
.modal__talk-summary {
  /* 余白や文字組みだけ欲しい場合に調整。見出しは出さないため最低限。 */
  line-height: 1.7;
  white-space: pre-line;
}

.modal__section {
  display: grid;
  row-gap: 6px;
}
.modal__section-heading {
  font-weight: 700;
  font-size: 1.1rem;
  border-left: 4px solid #1558df;
  padding-left: 8px;
}
.modal__section-body {
  line-height: 1.8;
  white-space: pre-line;
}

/* ================================
 * Modal — 複数プロフィール（カードの見た目に合わせる）
 * ================================ */

/* 既存：プロフィール一覧はカードの .session-profile-block の見た目を踏襲 */
.modal__profiles {
  display: grid;
  row-gap: 16px;
}
.modal__profiles .session-profile-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
margin:24px 0 0 0;
}
.modal__profiles .session-photo {
  flex: 0 0 auto;
  width: 180px;
  /*height: 200px;*/
  overflow: hidden;
}
.modal__profiles .session-photo img {
  width: 100%; height: 100%; object-fit: cover;
border-radius:10px;
}
.modal__profiles .session-profile {
  flex: 1 1 0%;
  line-height: 1.6;
  font-size: 0.95rem;
}


/* --- モーダル限定：プロフィールの折りたたみ --- */
.modal__profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  cursor: pointer;
  font-weight: 600;
  margin-top: 4px;
  user-select: none;
}
.modal__profile-trigger::after {
  content: "＋";
  font-weight: 700;
  transition: transform .2s;
}
.modal__profile-trigger.is-open::after {
  content: "－";
}
.modal__profile-detail {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  background: #f7f9ff;
  border-radius: 8px;
  border: 1px solid #e6ecff;
  line-height: 1.8;
  white-space: pre-line;
}
.modal__profile-detail.is-open { display: block; }




/* ================================
 * Modal: session-profile-block を main-session と同じ見た目に
 * ================================ */

/* main-session と同じ横並び＋clear を適用 */
.modal__profiles .session-profile-block {
  display: flex;
  clear: both;
}

/* 画像は縮まない（main-session と同等） */
.modal__profiles .session-profile-block img {
  flex-shrink: 0;
}

/* プロフィール名（main-session と同等） */
.modal__profiles .profile-name {
  font-size: 1rem;
  color: #151515;
}
.modal__profiles .profile-name strong {
  font-size: 130%;
  display: block;
}

/* 詳細テキスト（初期は非表示／main-session と同等） */
.modal__profiles .js-profile-detail {
  display: none;
  margin-top: 15px;
  font-size: 0.8rem;
  color: #999;
}

/* トリガーの見た目（main-session と同等）
.modal__profiles .js-profile-trigger {
  display: inline-block;
  background-color: #f0f0f0;
  margin: 10px 0 0 0;
  padding: 10px;
border-radius:5px;
  width: fit-content;
  cursor: pointer;
}*/

/* モーダルで開いた時の表示（JSで .is-open を付与）
.modal__profiles .js-profile-detail.is-open {
  display: block;
}*/



/* ================================
 * フォールバック（単体写真＋プロフィール）
 * ================================ */
.modal__textblock { display: contents; } /* 親Gridに参加させるだけ */

.modal__photo {
  /* 複数登壇者がない場合のフォールバック用。
     ご要望: 150px */
  width: 150px;
  height: 150px;
  border-radius: 50%; /* カードが丸なら50% */
  overflow: hidden;
}
.modal__photo > img,
.modal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal__profile {
  line-height: 1.6;
  font-size: 0.95rem;
  white-space: pre-line;
}

/* ================================
 * Close Button
 * ================================ */

/*
.modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none !important;
  font-size: 66px;
  cursor: pointer;
}
*/


/* モーダルの“外側”の右上に配置する */
.modal__close {
  position: fixed; /* ← modal__container ではなく画面全体に固定 */
  z-index: 99999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,1);
  color: #151515;
  border: none;
  font-size: 40px;
  cursor: pointer;
}
button{outline: none;}



.modal__btn a {
display:block;
width:100%;
margin:24px 0 0 0;
padding:10px;
text-align:center;
border-radius:50px;
background-color:#009cdd;
color:#fff;
font-weight:bold;
}

.modal__btn a:hover{
display:block;
width:100%;
background-color:#55cdff;
color:#fff !important;
transition:0.5s;
}







/* ================================
 * Responsive
 * ================================ */
@media (max-width: 640px) {
  .modal__container {
    row-gap: 10px;
padding:16px;
border-radius:5px;
  }
  .modal__sponsor-title.session-sponsor-title {
/*font-size: 1.6rem;*/
margin:36px 0 0 0;
}
  .modal__profiles .session-photo,
  .modal__photo {
    width: 100px;
    
  }

.modal__close {
  top:-10px;
  right:10px;
}

}



/* ドキュメントスクロール停止の保険 */
.html-modal-open {
  overflow: hidden;
}


/* 要素（例：.site-wrapper 等）のスクロール停止 */
.scroll-locked {
  overflow: hidden !important;
}


/* モーダルのタイトル内のサブタイトル（span）を小さく */
.modal__title span {
  font-size: 80%;
  line-height: 1.4;
  display: inline-block; /* 折り返し時に行間をキレイに */
  font-weight: 600;      /* お好みで：軽く太字 */
}

/* スマホで少しだけ小さめにしたい場合（任意） */
@media (max-width: 640px) {
  .modal__title span {
    font-size: 75%;
  }
}




/* ===== モーダルの基本 ===== */
#sessionModal {
  position: fixed;
  inset: 0;
  display: none;                 /* is-open で表示 */
  z-index: 9999;
}
#sessionModal.is-open { display: block; }


/* ↓モーダルをふわっと表示↓ */
#sessionModal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#sessionModal.is-open {
  visibility: visible;
}

#sessionModal.is-open.is-active {
  opacity: 1;
}

/* モーダルコンテナのアニメーション */
#sessionModal .modal__container {
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
}

#sessionModal.is-active .modal__container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* オーバーレイのフェードイン */
#sessionModal .modal__overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#sessionModal.is-active .modal__overlay {
  opacity: 1;
}

/* ↑モーダルをふわっと表示↑ */


/* レイヤー順（overlay < frame < close） */
#sessionModal .modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 1;
}

/* ★ フレームを“中央寄せ”にして基準にする */
#sessionModal .modal__frame {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);                 /* ← 中央寄せ */
  width: min(1450px, calc(100vw - 32px));/* ← モーダル幅 */
  z-index: 2;                                   /* overlay より前 */
}

/* 中身はフレーム幅いっぱい＋スクロール可 */
#sessionModal .modal__container {
  display: block;
/* display: flex; flex-direction: column; でもOK（その場合は2)の orderを使えます） */
  position: relative;
  width: 100%;                                  /* ← フレーム幅に合わせる（左寄り対策） */
  max-height: calc(90vh - 48px);
  overflow-y: auto;                              /* ← スクロールを有効化 */
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
margin:45px auto 0;
}


/* ★ ボタンはフレーム基準で“コンテナの直右上の外側” */
#sessionModal .modal__frame > .modal__close {
  position: absolute;
  top: 20px;
  right: 0;
  transform: translate(50%, -50%);              /* 右に半分／上に半分 → 角の外へ */
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  background: #fff;
  width: 40px; 
height: 40px; 
line-height: 40px;
  border-radius: 50%;
  text-align: center;
  font-size: 34px;
}

/* 微調整（任意：さらに外へ出す） */
#sessionModal .modal__frame > .modal__close {
  margin-right: 16px;   /* + でさらに右へ（外側） */
  margin-top: -8px;    /* - でさらに上へ（外側） */
}

/* 背景スクロール停止（JSが .body-modal-open を付与） */
.body-modal-open { overflow: hidden; }




/* ===== モーダルでも main-session と同じ見た目を適用（.js-profile-*） ===== */

/* ブロックの並びはすでに合わせ済みならこの2つは任意（使っていれば有効化） */
#sessionModal .session-profile-block {
  display: flex;
  clear: both;
}
#sessionModal .session-profile-block img {
  flex-shrink: 0;
}

/* プロフィール名（もし main-session と同じ見た目が必要なら） */
#sessionModal .profile-name {
  font-size:clamp(0.9rem, 0.563rem + 0.56vw, 1.125rem);
  color: #151515;
}
#sessionModal .profile-name strong {
  font-size: 130%;
  display: block;
}

/* 詳細（初期は非表示 → JSが display:block; max-height:0 に切替） */
#sessionModal .js-profile-detail {
  display: none;
  margin-top: 15px;
  font-size: 0.9rem;
  color: #999;
}

/* トリガー（main-session と同じ） */
#sessionModal .js-profile-trigger {
  display: inline-block;
  background-color: #f5f5f5;
  margin: 10px 0 0 0;
  padding: 10px;
  width: fit-content;
  cursor: pointer;
}



/* Profileトリガーの + / - 記号を共通化（main-session & modal） */
.js-profile-trigger,
.modal__profile-trigger {
  position: relative;
  cursor: pointer; /* 念のため */
  user-select: none;
display: inline-block;
    background-color: #f0f0f0;
    margin: 10px 0 0 0;
    padding: 8px;
    font-size: 1rem;
border-radius:5px;
    width: fit-content;
}

.js-profile-trigger::after,
.modal__profile-trigger::after {
  content: "＋";
  font-weight: 700;
  margin-left: 6px;
  transition: transform .2s ease;
}

.js-profile-trigger.is-open::after,
.modal__profile-trigger.is-open::after {
  content: "－";
}


/* ===== モーダル下にボタンを追加 ===== */


#sessionModal .modal__cta {
  position: static !important;     /* sticky/absolute/fixed が残っていたら打ち消す */
  top: auto !important;
  bottom: auto !important;
  order: initial;                  /* flexを使っているなら order: 999; にして末尾でもOK */
  margin: 24px 20px 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  text-align: center;
  background: transparent;
  box-shadow: none;
  z-index: auto;
}


#sessionModal .modal__cta-link {
display:block;
max-width:500px;
margin:24px auto 0;
padding:16px;
text-align:center;
border-radius:50px;
background-color:#009cdd;
color:#fff;
font-weight:bold;
}
#sessionModal .modal__cta-link:hover {
display:block;
width:100%;
background-color:#55cdff;
color:#fff !important;
transition:0.5s;
}







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

.header_sponsored_area{
    width:100%;
    background-color:#fff;
    color:#000;
    font-size:14px;
    font-family: Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    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;
}


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

.block_sponsored_area{
margin:25px;
}


}