@charset "utf-8";

body {
    color: #333333;
    font-family: sans-serif;
    text-transform: none;
    background-color: rgb(250, 250, 250);

}

.bold {
    font-weight: bold;
}

.hero-section {
    /* background-image: url('assets/img/we-base-2026-main-new.jpg'); */
    /* background-image: url('assets/img/we-base-2026-03.jpg'); */
    background-image: url('../assets/img/we-base-2026-nologo.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 100px;
    padding-bottom: 100px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: rgb(23, 58, 33);
}

.hero-content {
    padding-left: 10%;
    text-align: left;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
    border-top: 1px solid white;
    padding-top: 10px;
    padding-left: 10px;
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}

.hero-address,
.hero-venue {
    font-size: 1rem;
    margin-bottom: 5px;
    padding-left: 10px;

}

.hero-datetime {
    font-size: 1rem;
    margin-bottom: 5px;
    border-top: 1px solid white;
    padding-top: 5px;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
    padding-left: 10px;
}

.hero-btn {
    text-align: center;
}

.hero-content .btn-register {
    /* より具体的なセレクタ */
    background-color: rgb(0, 64, 41) !important;
    /* ボタンの背景色 */
    color: white !important;
    /* ボタンの文字色 */
    border: 1px solid white !important;
    /* 白い枠線 */
    transition: background-color 0.3s ease !important;
    /* ホバー時のアニメーション */
    border-radius: 10px;
    opacity: 0.9;
    text-transform: none;
    text-align: center;
}


.hero-content .btn-register:hover {
    /* より具体的なセレクタ */
    background-color: rgb(0, 64, 41) !important;
    /* マウスオーバー時の背景色 */
    border-color: white !important;
    /* マウスオーバー時の枠線の色 (念のため) */
    opacity: 1;
}

.hero-image-col {
    padding-top: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: end;
    justify-content: center;
    /* d-flex align-items-center justify-content-center */

}

.hero-image {
    width: 300px;
    /* margin: auto;  */
    /* display: flex; */
    /* justify-content: center;
    justify-self: end; */
    /* object-fit: scale-down; */
    /* align-items: end; */
    /* align-items: center; */

}

/* 必要に応じてレスポンシブデザインを追加 */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 80px;
        padding-bottom: 80px;
        text-align: center;
        justify-content: center;
    }

    .hero-content {
        padding-left: 0;
    }

    .hero-title {
        font-size: 2.5rem;
        border-top: 1px solid white;
        padding-top: 8px;
        border-bottom: 1px solid white;
        padding-bottom: 8px;
    }

    .hero-datetime {
        border-top: 1px solid white;
        padding-top: 3px;
        border-bottom: 1px solid white;
        padding-bottom: 3px;
    }

}



.bg-secondary {
    background-color: rgba(149, 230, 172, 0.1) !important;
}

.speaker-card {
    border: none;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    background-color: white;
    min-width: 240px;
    color: #173A21;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.speaker-card h4,
.ambassadors-section h2 {
    color: #173A21;
    font-weight: bold;
}

.speaker-card p.text-company {
    color: #42A85F;

}

.speaker-image,
.ambassador-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* 特定のスピーカー画像の調整 */
.speaker-image.zoom-out {
    object-fit: cover;
    object-position: center;
    transform: scale(0.7);
}

.speaker-image.position-right {
    object-position: right center;
}

.speaker-image.zoom-in {
    object-fit: cover;
    object-position: center;
    transform: scale(1.5);
    transform-origin: center;
}

.ambassador-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(66, 168, 95, 0.2), rgba(23, 58, 33, 0.2));
    color: #173A21;
    font-weight: bold;
    border: 2px dashed rgba(23, 58, 33, 0.3);
}

.speaker-card.shadow {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.speaker-card.shadow:hover {
    transform: scale(1.05);
    /* 少し拡大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* 影を濃くする */
}


.bg-info {
    background-color: #17a2b8 !important;
}

.bg-info .bg-info .lead {
    color: white !important;
}

footer {
    background-color: #343a40 !important;
}

a {
    color: #007bff;
}

a:hover {
    color: #0056b3;
}

.section-title-g {
    margin-bottom: 30px;
    color: #42A85F;
    text-align: center;
    font-weight: bold;
}


.section-title-w {
    margin-bottom: 50px;
    color: white;
    text-align: left;
    font-weight: bold;
}


.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 少し影をつけて立体感を出す */
    border-radius: 8px;
    /* 角を丸くする */
    overflow: hidden;
    /* 角丸を適用するために必要 */
    /* background-color: rgb(66, 168, 95); */
    /* テーブルの背景色を緑に */
    color: #173A21;
    /* テーブルの文字色を白に */
}

.schedule-table th,
.schedule-table td {
    border: none;
    /* 枠線をなくす */
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #42A85F;
    /* 各セルの下に黒い線を追加 */
}

.schedule-table th {
    background-color: rgba(149, 230, 172, 0.1);
    /* ヘッダーの背景色を偶数行と同じ色に */
    color: #173A21;
    /* ヘッダーの文字色を白に */
    font-weight: bold;
    text-transform: none;

}

.schedule-table tbody tr:nth-child(even) {
    background-color: rgba(149, 230, 172, 0.1);
    /* 偶数行の背景色を濃い緑の薄い透明に */
}

.schedule-table tbody tr:hover {
    background-color: rgba(23, 58, 33, 0.2);
    /* ホバー時の背景色を濃い緑の少し濃い透明に */
    transition: background-color 0.3s ease;
    /* ホバー効果を滑らかにする */
}

/* 最後の行のボーダーは不要なので削除
.schedule-table tbody tr:last-child td {
        border-bottom: none;
    
} */

/* 最後の行のボーダーは不要なので削除
.schedule-table tbody tr:last-child td {
        border-bottom: none; 
    
} */

.conference-about {
    background-color: rgb(66, 168, 95);
    color: white;
    padding-top: 3rem !important;
    /* py-5 のパディングを上書き */
    padding-bottom: 3rem !important;
    /* py-5 のパディングを上書き */
    text-align: left;
    /* 文章を左寄せ */

}

.conference-about {
    color: white;
    /* タイトルも白文字に */
    text-align: left;
    /* タイトルも左寄せ */
}

.conference-about .container {
    text-align: left;
    /* container内のテキストを左寄せ */
    max-width: 1200px;

}

.conference-about .row {
    text-align: left;
    /* container内のテキストを左寄せ */
    max-width: 1200px;

}


.ambassadors-section {
    padding: 50px 0;
    text-align: center;
}

.ambassadors-section h2 {
    color: rgb(66, 168, 95);
    /* 文字色を緑に変更 */
    margin-bottom: 30px;
}

.ambassadors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.ambassador-card {
    width: 100%;
    text-align: center;
    color: #173A21;
}

.ambassador-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ambassador-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.ambassador-title {
    font-size: 0.9em;
    margin-bottom: 10px;
}

.ambassador-social {
    margin-top: 10px;
}

.ambassador-social a {
    color: #173A21;
    margin: 0 5px;
    font-size: 1.2em;
}

.ambassador-social a:hover {
    color: #007bff;
}

.speaker-social {
    margin-top: 10px;
}

.speaker-social a {
    color: #173A21;
    /* アイコンの色 */
    margin: 0 5px;
    font-size: 1.2em;
}

.speaker-social a:hover {
    color: #007bff;
    /* ホバー時のアイコンの色 */
}

.speaker-social .qiita-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('../assets/img/qiita-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -0.15em;
    margin-bottom: -0.05em;
}

.speaker-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}



.about-event-section {
    padding: 0px 20;
    display: flex;
    align-items: center;
    background-color: rgb(66, 168, 95);
    /* 背景色を緑に変更 */
    color: white;
    /* 文字色を白に変更 */
    margin: 0;
    border: 0;

}

.about-event-text {
    flex: 1;
    padding: 50px;
    text-align: left;
    padding: 0px;
    color: white;

}

.about-event-text h2 {
    color: white;
    /* タイトルも白文字に */
    padding: 0px 30px;
    margin-bottom: 20px;
    font-size: 2.0em;
    font-weight: bold;
}

.about-event-text p {
    color: white;
    /* 段落の文字も白文字に */
    padding: 0px 30px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.about-event-text a {
    color: white;
    text-decoration: underline;
    /* 段落の文字も白文字に */

}

.about-event-image {
    flex: 1;
    /* テキストと同じ比率で領域を確保 */
    text-align: right;
    /* 画像を右寄せ */
    padding: 0;
    /* 画像周りのpaddingをなくす */
    /* width: 50%; */
    height: 100%;
    margin: 0;

}

.about-event-image img {
    max-width: 100%;
    /* 親要素の幅に合わせる */
    height: auto;
    border-radius: 0;
    /* 画像の角丸をなくす */
    box-shadow: none;
    /* 画像の影をなくす */
    display: block;
    /* インライン要素の余白問題を解消 */
    margin: 0;
    padding: 0;
}



@media (max-width: 768px) {
    .about-event-section {
        flex-direction: column;
        text-align: center;
    }

    .about-event-text,
    .about-event-image {
        width: 100%;

    }

    .about-event-text {
        text-align: left;
    }

    .about-event-image {
        text-align: center;


        /* モバイルでは中央寄せ */
    }

    .ambassadors-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.location-section {
    display: flex;
    align-items: stretch;
    /* 高さ揃え */
    background-color: rgb(23, 58, 33);
    /* 背景色を濃い緑に変更 */
    padding: 0px;
    /* padding を戻す */
}

.location-map {
    flex: 1;
    padding: 0px;
    min-height: 300px;
    /* 地図の最低限の高さ */
}

.location-address {
    flex: 1;
    padding: 50px 0px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直方向中央揃え */
    /* 背景画像を設定 */
    background-image: url('../assets/img/we-base-2026.jpg');
    /* 画像パスを修正 */
    background-size: cover;
    /* 要素全体を覆うように画像を拡大縮小 */
    background-position: center;
    /* 画像を中央に配置 */
    color: white;
    /* 背景画像が見やすいように文字色を白に */
}

.location-address h3 {
    color: white;
    padding: 0px 30px;
    /* 背景画像が見やすいように文字色を白に */
    margin-bottom: 15px;
}

.location-address p {
    color: white;
    padding: 0px 30px;
    /* 背景画像が見やすいように文字色を白に */
    line-height: 1.6;
    margin-bottom: 10px;
}

.location-address a {
    color: lightblue;
    /* 背景画像が見やすいようにリンク色を変更 */
    text-decoration: none;
}

.location-address a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .location-section {
        flex-direction: column;
    }

    .location-map,
    .location-address {
        width: 100%;
        min-height: auto;
        text-align: center;
        padding: 20px;
    }

    .location-address {
        align-items: center;
    }
}

.bg-info#register {
    /* IDセレクタでより強くスタイルを適用 */
    /* background-color: white !important; */
    background-color: rgb(250, 250, 250) !important;

    /* 背景を白に */
    color: rgb(66, 168, 95) !important;
    /* 文字色を緑に */
}

.bg-info#register .section-title {
    color: rgb(66, 168, 95) !important;
    /* タイトルも緑に */
}

.bg-info#register .lead {
    color: rgb(66, 168, 95) !important;
    /* リード文も緑に */
}

.bg-info#register .btn-white {
    background-color: rgb(0, 64, 41) !important;
    /* hero-section のボタンの背景色 */
    color: white !important;
    /* hero-section のボタンの文字色 */
    border: 1px solid white !important;
    /* hero-section のボタンの枠線 */
    transition: background-color 0.3s ease, transform 0.3s ease-in-out !important;
    /* アニメーション */
    border-radius: 10px;
    /* hero-section のボタンの角丸 */
    opacity: 0.9;
    /* hero-section のボタンのopacity */
    text-transform: none;
    /* hero-section のボタンのtext-transform */
}

.bg-info#register .btn-white:hover {
    background-color: rgb(0, 64, 41) !important;
    /* hero-section のボタンのホバー時の背景色 */
    border-color: white !important;
    /* hero-section のボタンのホバー時の枠線色 */
    opacity: 1;
    /* hero-section のボタンのホバー時のopacity */
    transform: scale(1.05);
    /* ホバー時の拡大アニメーションを維持 */
}

footer.bg-dark {
    /* より具体的にfooterタグに適用 */
    background-color: rgb(23, 58, 33) !important;
    /* 背景色を濃い緑に変更 */
}