@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');


/* フレーム設定-------------------------------------------------------------------------------- */


body {
width: 100%;
position:relative;
}


#adspecial_atlassian_202603{
padding: 0;
line-height:1.8;
}


#adspecial_atlassian_202603.adspecial_type1{
max-width:none !important;
width:100% !important;
max-width:100% !important;
position:relative;
font-family: "Google Sans", Arial, "IBM Plex Sans JP", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
font-style: normal;
line-height:1.5;
color:#262b30;
position:relative;
}


#adspecial_atlassian_202603.adspecial_type1::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:url(/info/event/atlassian/202603/media/img_parts_bg.png) center top no-repeat;
background-size:cover;
opacity:0.7;
z-index: -1;
}

#adspecial_atlassian_202603.adspecial_type1::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(/info/event/atlassian/202603/media/img_parts_main.png) center center no-repeat;
background-size:cover;
opacity:0.7;
z-index: -1;
}



footer{
margin-top:0;
}


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

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




#adspecial_atlassian_202603.adspecial_type1 .frame_header{
width:100%;
position:relative;
}

#adspecial_atlassian_202603.adspecial_type1 .frame_header::before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:url(/info/event/atlassian/202603/media/img_kv.png) center top no-repeat;
background-size:cover;
z-index:1;
}


#adspecial_atlassian_202603.adspecial_type1 .frame_header::after{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.35);
background-size:cover;
z-index:-1;
}


#adspecial_atlassian_202603.adspecial_type1 .frame_header .header-inner{
margin:0 auto;
padding:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
max-width:1200px;
height:350px;
position:relative;
z-index:100;
}


#adspecial_atlassian_202603.adspecial_type1 .frame_header .ttl-headline {
margin:0 auto;
padding:0;
line-height:1.4;
font-size:clamp(2rem, 1.25rem + 3.75vw, 5rem);
font-family: "Google Sans", sans-serif;
font-weight:bold;
color:#1868db;
width:fit-content;
will-change: transform, opacity;
position:relative;
}


.js-ttl { display:inline-block; /* 必要なら */ white-space: pre-wrap; }
.js-ttl .ch { display:inline-block; will-change: transform, opacity; }


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

  100% {
    opacity: 1;}
}


#adspecial_atlassian_202603.adspecial_type1 h1{
position: relative;
z-index:100;
line-height:1.5;
display:flex;
flex-direction:column;
font-size:clamp(1.5rem, 0.833rem + 1.67vw, 2.5rem);
font-family: "Google Sans", Arial, "IBM Plex Sans JP", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
text-align:center;
margin:0 0 20px 0;
opacity:0;
animation: fade 0.5s linear 0.5s forwards;
}



/* lead --------------------------------------------------------------------------------------- */


.archive-title{
margin:0 auto;
padding:15px;
font-size:clamp(1.25rem, 0.75rem + 1.25vw, 2rem);
font-weight:bold;
color:#fff;
line-height:1.4;
text-align:center;
width:100%;
position:relative;
z-index:1000;
}

.archive-title::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#262b30;
background: linear-gradient(0deg, #262b30 0%, #373e45 100%);
z-index:-1;
}

.archive-summary{
margin:0 auto;
padding:45px 0;
position:relative;
backdrop-filter:blur(5px);
z-index:10;
}


.archive-summary::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(/info/event/atlassian/202603/media/img_parts_main.png) center center no-repeat;
background-size:cover;
opacity:0.8;
}

.archive-summary p {
max-width:1050px;
font-size: 1rem;
font-weight:bold;
line-height: 1.8;
margin:0 auto;
padding:10px 0;
position:relative;
z-index:10;
}


/* h2 --------------------------------------------------------------------------------------- */


h2 {
padding:15px 0;
font-weight: normal;
font-size:clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
font-family: "Google Sans", Arial, "IBM Plex Sans JP", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
border: none;
font-feature-settings: "palt" 1;
text-align:center;
position: relative;
z-index:5;
}

h2 span{
font-size:1.125rem;
margin:0 auto;
padding:10px;
/*background-color:#262b30;*/
color:#262b30;
width:fit-content;
display:block;
}



/* archive report --------------------------------------------------------------------------------------- */


.report-block,
.content-block{
margin:15px auto 45px;
padding:25px 45px;
background-color:#fff;
border-radius:30px;
border:1px solid #e5e5e5;
max-width:1250px;
position:relative;
z-index:10;
}

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


.session-program .session-frame{
margin:36px auto;
padding-bottom:40px;
border-bottom:1px solid #444;
position:relative;
}
.session-program .session-frame:last-child{
border-bottom:none;
padding-bottom:0;
}


.session-program .session-label{
background-color:#000;
color:#fff;
font-size:1.125rem;
text-align:center;
}


.session-program .session-time{
margin:15px 0;
text-align:left;
font-size:1.5rem;
padding:0 25px;
background-color:#01347d;
color:#fff;
border-radius:8px;
width:fit-content;
position:relative;
}

.session-program .session-speaker{
text-align:center;
font-size:1.5rem;
border-top:1px solid #444;
border-bottom:1px solid #444;
padding:5px 0;
}


.session-program .session-title {
margin: 0;
padding: 0 0 25px 0;
font-size:clamp(1.25rem, 0.75rem + 1.25vw, 2rem);
font-weight:bold;
line-height:1.5;
font-feature-settings: "palt" 1;
position:relative;
}

.session-program .session-title::before{
content:"";
position:absolute;
bottom:0;
left:0;
width:80px;
height:8px;
background-color:#01347d;
}


.session-program .session-title span {
display: block;
margin: 15px auto;
font-size: 70%;
font-weight:bold;
text-align:center;
border-radius:30px;
box-shadow:0 10px 10px -5px #ccc;
}


.session-program .session-summary {
letter-spacing: 0;
font-size:1.125rem;
padding:20px 0;
line-height:1.6;
}

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

@media (min-width: 640px) {
.session-program .session_profile-rows{
display:flex;
justify-content:space-between;
}
.session-program .session_profile-rows .session_profile{
width:48%;
}
}

.session-program .profile_thumb {
margin: 0 35px 20px 10px;
flex-shrink: 0;
width:135px;
height:135px;
position:relative;
z-index:1;
}

.session-program .profile_thumb::before{
content:"";
position:absolute;
top:-10px;
right:-5px;
width:80%;
height:80%;
background-color:#f5a200;
border-radius:30px;
z-index:-1;
}

.session-program .profile_thumb::after{
content:"";
position:absolute;
bottom:-8px;
left:-10px;
width:80%;
height:80%;
background-color:#6a9a23;
border-radius:30px;
z-index:-1;
}


.session-program .profile_thumb img{
border-radius:30px;
width:125px;
object-fit: cover;
display:block;
}

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

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

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

.session-program .profile_name .js-profile-trigger{
position: relative;
display: inline-block;
font-size:0.9rem;
font-weight:normal;
margin:10px 0 0 0;
padding:1px 10px;
background-color:#262b30;
border:1px solid #262b30;
color:#fff;
cursor: pointer;
width:fit-content;
border-radius:5px;
font-feature-settings:"palt";
}
.session-program .profile_name .js-profile-trigger:hover{
border:1px solid #262b30;
background-color:#fff;
color:#262b30;
transition:0.3s;
}

.session-program .profile_name .js-profile-detail{
padding-top: 10px;
padding-bottom:20px;
font-size:0.9rem;
font-weight:normal;
line-height:1.6;
color:#666;
display:block;
position:relative;
}


.archive-link{
position:absolute;
bottom:10%;
right:0;
text-align:center;
}

.archive-link a{
background-color:#1868db;
/*background: linear-gradient(0deg, #1868db, #4d8ced);*/
color:#fff;
border-radius:50px;
padding:20px 30px;
font-size:1.125rem;
font-weight:bold;
width:400px;
box-shadow: 0 10px 10px -5px #a0a0a0;
display:block;
}

.archive-link a:hover{
background-color:#2ba5ff;
color:#fff !important;
transition:0.5s;
}


/* 講演資料 */

.report-block .document-area ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.report-block .document-area ul li{
max-width:200px;
margin:0 10px 45px;
}

.report-block .document-area ul li span{
display:block;
transition:0.3s;
}


.report-block .document-area ul li a span.thumb{
width:200px;
margin:20px auto;
}
.report-block .document-area ul li:hover a span.thumb{
transform:scale(1.03);
}

.report-block .document-area ul li a span.caption{
color:#080e14 !important;
font-size:90%;
text-decoration:underline;
}


.report-block .document-area ul li a:hover span.caption{
color:#1868db !important;
text-decoration:none;
}


@media (max-width: 960px) {

.report-block .document-area ul li{
margin:0 10px 15px;
}


}




/* modal window setting */


  /* オーバーレイ */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.22,.61,.36,1);

  }
  .modal-overlay.is-open {
    display: flex;
  opacity: 1;
  }


.modal-overlay.is-open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}


  /* モーダル本体 */
  .modal {
    background: #fff; /* 動画周りの黒背景 */
    width: min(90vw, 1600px);
    height: min(90vh, 1200px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto; /* 本体(iframe) + ステータス */
  transform: scale(0.96) translateY(4px);
  opacity: 0;
  transition:
    transform 220ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms cubic-bezier(.22,.61,.36,1);
z-index:10000;
  }

  /* ✕ボタン（右上固定） */
  .modal-close {
    position: absolute;
    top: 30px;
    right: 30px;
    appearance: none;
    border: none;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.15s ease, transform 0.06s ease;
  }
  .modal-close:hover {
    background: rgba(15, 23, 42, 0.9);
  }
  .modal-close:active {
    transform: scale(0.98);
  }
  .modal-close:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
  }

  .modal-body {
    min-height: 0; /* iframeが縮むために必要 */
    display: grid;
    grid-template-rows: 1fr auto;
    background: #fff;
  }

  .modal-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    ackground: transparent;
  }

  .modal-status {
    padding: 8px 12px;
    font-size: 12px;
    color: #cbd5e1;
    background: #0b1222;
    border-top: 1px solid #1f2937;
  }

  /* スクロール固定 */
  body.modal-open {
    overflow: hidden;
    touch-action: none;
  }

  @media (max-width: 640px) {
    .modal {
      width: 96vw;
      height: 80vh;
      border-radius: 12px;
    }
    .modal-close {
      top: 8px;
      right: 8px;
      font-size: 16px;
      padding: 6px 8px;
    }
  }




/* fadein ******************************************************************************/



/* フェードイン用のスタイル */
.fade-in-element {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延アニメーション用 */
.fade-in-element.delay-1 {
  transition-delay: 0.1s;
}

.fade-in-element.delay-2 {
  transition-delay: 0.2s;
}

.fade-in-element.delay-3 {
  transition-delay: 0.3s;
}

/* 下から上へのフェードイン */
.fade-up {
  transform: translateY(50px);
}

/* 左からのフェードイン */
.fade-left {
  transform: translateX(-50px);
}

/* 右からのフェードイン */
.fade-right {
  transform: translateX(50px);
}



/* スムーズスクロール用 */
a[href^="#"] {
  scroll-behavior: smooth;
}






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


@media (max-width: 960px) {


#adspecial_atlassian_202603.adspecial_type1{
background-size:cover;
}


#adspecial_atlassian_202603.adspecial_type1 .frame_header{
text-align:left;
}


.archive-summary p{
font-size:1rem;
margin:0 15px;
}


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


.session-program .session-time{
padding:0 20px;
}




}






@media (max-width: 640px) {



.report-block{
padding:20px;
}


.archive-link{
position:relative;
margin:20px auto;
text-align:center;
}

.archive-link a{
width:100%;
display:block;
}



}




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


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


.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{
    background-color:#fff;
    padding:25px 0;
}


.block_sponsored_area{
    clear:both;
    background-color:#fff;
    color:#000;
    font-size:14px;
    border:1px solid #000;
    margin:0 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: 960px) {

.block_sponsored_area{
margin:25px;
}

}