.pc{display:block;}
.sp{
    display:none;
}
#hero {
    background;
    background: url(https://wasabi-inc.biz/official/wp-content/themes/wasabi/images/itconference2026/bk.webp);
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 0 40px;
    background-size: cover;
}
/* ---------------------------------------------------- */
/* 1. CTAグラデーションボタン用 CSS */
/* ---------------------------------------------------- */
.gradient-btn {
    /* ベーススタイルをTailwindクラスで指定しつつ、グラデーションを上書き */
    display: inline-flex;
    text-align: center;
    position: relative;
    text-decoration: none;
    outline: none;
    background: #ffae00;
    color: #FFFFFF;
    background-position: 0% 50%;
    font-weight: 700; /* font-bold */
    width: 70%;
    max-width: 800px;
    padding: 2% !important;
    font-size: 1.5rem !important;
    transition: color 0.5s ease;
}
.btn-copy{
    color:#ffae00;
    background:#fff;
    padding: 6px;
    margin-right: 12px;
    border-radius: 4px;
}
.gradient-btn:hover {
    transition:0.5s;
    transform:scale(1.05,1.05);
}


.sub_btn {
    width: 470px;
    margin: auto;
    text-align: center;
}
.sub_btn :hover{
    
}
#timetable{
    margin: 80px auto 0;
}
.bg-red-500{
   background:#ff4319 !important;
}
.border-red-600{
   border-color:#ff4319 !important;
}
.text-red-500{
    color:#ff4319 !important;
}
.logo_icon{
    margin: 15% 0 0;
}
.mv_item_01,.mv_item_02,.mv_item_03,.mv_item_04{
    position:absolute;
    z-index: -1;
}
.mv_item_01{
    max-width: 500px;
    width:100%;
    left: 0%;
    right: 54%;
    margin: auto;
    top: -15%;
}
.mv_item_02{
    max-width: 440px;
    width: 23%;
    right: clamp(2%,0%,15%);
    left: 49%;
    top: -15%;
    margin: auto;
}
.mv_item_03{
    max-width: 610px;
    width:100%;
    left: 0%;
    right: 56%;
    margin: auto;
    bottom: 2%;
}
.mv_item_04{
    max-width: 420px;
    width:100%;
    left: 55%;
    right: 10%;
    margin: auto;
    bottom: -2%;
}
.date{
    width: 85%;
    /* max-width: 1070px; */
    margin: 60px auto 2%;
}

/* ---------------------------------------------------- */
/* 2. 自動横スクロールスライダー用 CSSアニメーション */
/* ---------------------------------------------------- */
.marquee {
    white-space: nowrap; /* 子要素を強制的に横並びにする */
    overflow: hidden;
    box-shadow: inset 0 6px 10px -8px rgba(0,0,0,0.1), inset 0 -6px 10px -8px rgba(0,0,0,0.1);
}
 /* カスタムCSSはTailwindクラスで表現できない部分のみ */
        .timeline-item {
            position: relative;
        }
        
        /* 縦線とドットの位置調整のため、Tailwindユーティリティをオーバーライド */
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            height: 300vh;
            left: 50%;
            border-radius: 45px;
            width: 2px;
            background-color: #d1d5db; /* gray-300 */
            transform: translateX(-50%);
            z-index: 0;
        }

        /* ドット */
        .timeline-item::before {
            content: '';
            position: absolute;
            top: 1.25rem; /* 20px */
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgb(239 68 68 / var(--tw-text-opacity, 1)); /* blue-700 */
            /* border: 4px solid #f9fafb; */ /* gray-50 - 背景色 */
            z-index: 2;
        }

        /* 左右のアイテムへのドット配置 */
        .timeline-item:nth-child(odd)::before {
            right: -48px; /* 中央線上に配置 */
        }

        .timeline-item:nth-child(even)::before {
            left: -48px; /* 中央線上に配置 */
        }

        /* コネクタ線 (::after) */
        .timeline-item::after {
            content: '';
            position: absolute;
            top: 1.625rem; /* 26px - ドットの中心に合わせる */
            height: 2px;
            width: 40px;
            background-color: rgb(239 68 68 / var(--tw-text-opacity, 1)); /* blue-700 */
            z-index: 1;
        }

        /* 左右のアイテムへのコネクタ配置 */
        .timeline-item:nth-child(odd)::after {
            right: -40px; /* ドットの直前まで伸ばす */
        }

        .timeline-item:nth-child(even)::after {
            left: -40px; /* ドットの直前まで伸ばす */
        }


/* 右から左へスクロールするアニメーション (RTL Motion) */
@keyframes scroll-rtl {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); } 
}

/* 画像スライダーのアニメーション (右から左へ) */
.slider-content {
    display: inline-block;
    animation: scroll-rtl 30s linear infinite; /* 速度: 30s */
    padding-right: 1rem; 
}
.slider-content:hover {
    animation-play-state: paused; /* ホバーで一時停止 */
}

/* 参加者の声のアニメーション (右から左へ) */
.voices-content {
    display: inline-block;
    animation: scroll-rtl 40s linear infinite; /* 速度: 40s */
    padding-right: 1rem; 
}
.voices-content:hover {
    animation-play-state: paused; /* ホバーで一時停止 */
}

/* ---------------------------------------------------- */
/* 3. FAQアコーディオン用 CSSアニメーション */
/* ---------------------------------------------------- */
.answer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding:0;
    
}
.answer-content.active {
    max-height: 500px; 
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ---------------------------------------------------- */
/* 4. About Us 画像切り替え用 CSS (フェードイン・アウト) */
/* ---------------------------------------------------- */
.about-image-container {
    position: relative;
    overflow: hidden;
}
.about-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: cover;
}
.about-image.active {
    opacity: 1;
}
.gradient-bg{
    transition: opacity 1s ease-in-out;
}
.gradient_btn:hover {
  color: #fff;
}
.gradient_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.gradient_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #1B85FB;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

.fade-in-item {
    opacity: 0; /* 初期状態: 非表示 */
    transform: translateY(20px); /* 初期状態: 20px下へ移動 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 0.8秒かけて滑らかに変化 */
    /* 複数の要素がある場合、個別に遅延を設定するとより動きが出ます (例: transition-delay: 0.1s;) */
}

/* スクロールでビューポートに入ったときに適用されるクラス */
.is-visible {
    opacity: 1; /* 最終状態: 表示 */
    transform: translateY(0); /* 最終状態: 元の位置 */
}

@media (max-width: 1280px) {
.mv_item_01,.mv_item_02,.mv_item_03,.mv_item_04{
    position:absolute;
    z-index: -1;
}
.mv_item_01{
    max-width: 510px;
    width:100%;
    right: 0%;
    left: -80%;
    margin: auto;
    top: -16%;
}
.mv_item_02{
    max-width: 380px;
    left: 0;
    right: -88%;
    margin: auto;
    top: -17%;
    width:100%;
}
.mv_item_03{
    max-width: 600px;
    width:100%;
    right: 0;
    left: -70%;
    margin: auto;
    bottom: -15%;
}
.mv_item_04{
    max-width: 430px;
    width:100%;
    left: 0;
    right: -94%;
    margin: auto;
    bottom: -19%;
}
    
}


        /* レスポンシブ対応 (モバイル) */
        @media (max-width: 768px) {
            .timeline::before {
                left: 0px;
                height: 353vh;
                top: 23px;
            }
            
            /* すべて左寄せ */
            .timeline-item,
            .timeline-item:nth-child(odd),
            .timeline-item:nth-child(even) {
                width: 100%;
                left: 0px;
                padding-left: 20px;
                margin-left: 20px;
            }
            .timeline-item:nth-child(even) {
                left: 20px;
            }
            
            /* ドットを左の線上に配置 */
            .timeline-item::before,
            .timeline-item:nth-child(odd)::before,
            .timeline-item:nth-child(even)::before {
                left: -27px;
                right: auto;
            }

            /* コネクタ線を左側の線とコンテンツボックスの間に配置 */
            .timeline-item::after,
            .timeline-item:nth-child(even)::after,
            .timeline-item:nth-child(odd)::after {
                left: -20px; 
                right: auto;
                width: 20px; 
            }
        }

@media (max-width: 639px) { /* smブレークポイント未満 */
    
.pc{display:none;}
.sp{
    display:block;
}
.date{
    
}
    .logo_icon{
        /* max-width: 570px !important; */
        /* margin: 124px auto 0; */
        /* padding: 0 0 0px; */
        /* background: green; */
        /* width: 100%; */
    }
    #h1 img{
        
    }
    .dl-responsive > div > dl > div {
        flex-direction: column;
        align-items: flex-start;
    }
    
.mv_item_01,.mv_item_02,.mv_item_03,.mv_item_04{
    position:absolute;
    z-index: -1;
}
.mv_item_01{
    max-width: 360px;
    width:100%;
    left: -13%;
    top: -10%;
}
.mv_item_02{
    max-width: 380px;
    right: -56%;
    top: -15%;
    width:100%;
}
.mv_item_03{
    max-width: 420px;
    width:100%;
    left: -51%;
    bottom: 13%;
}
.mv_item_04{
    max-width: 300px;
    width:100%;
    right: -50%;
    bottom: 9%;
}

}
@media (max-width: 420px) { /* smブレークポイント未満 */

    #hero h1{
        /* width: 420px; */
        margin: auto;
        display: block;
        text-align: center;
    }
    
    .logo_icon{
        margin: 39% auto 0;
        display: block;
        max-width: 820px;
        width: 100%;
    }
    
    .mv_item_01{
    max-width: 270px;
    width:100%;
    left: -60%;
    top: -13%;
}
.mv_item_02{
    max-width: 210px;
    right: -64%;
    top: -8%;
    width:100%;
}
.mv_item_03{
    max-width: 340px;
    width:100%;
    left: -55%;
    bottom: -7%;
}
.mv_item_04{
    max-width: 250px;
    width:100%;
    right: -48%;
    bottom: -18%;
}
#hero .gradient-bg{
    background:#fff;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 0 14px;
    box-shadow: 1px 1px 16px #cccccc;
}
.gradient-btn{
    margin: 20px 0 0;
    width: 90%;
}
#hero .gradient-btn{
    font-size:1rem !important;
    width: 340px;
    font-size: 20px !important;
    padding: 15px !important;
}
    .btn-copy{
        position:absolute;
        top: -31px;
        width: 200px;
        font-size: 16px;
        left: 0;
        right: 0;
        border: 2px solid #ffae00;
        margin: auto;
    }
#hero .btn-copy{
    color:#ffae00;
    background:#fff;
    padding: 4px 4px;
    width: 200px;
    border: 1px solid #ffae00;
    position: absolute;
    top: -27px;
    left: 0;
    right: 0;
    font-size: 16px;
    border-radius: 4px;
}
    
.sub_btn {
    width: 100%;
    margin: 10% auto !important;
    text-align: center;
}
    .sub_btn a{
        padding: 12px 26px;
        font-size: 14px;
    }
    
   .timeline-container{
       width: 84%;
       margin: auto;
   }
    .movie_wrapper{
    }
    .movie_wrapper iframe{
        height: 260px;
    }

}