@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@900&display=swap');

/* --- リセット & 基本設定 --- */
:root {
    --primary-blue: #003AA5; /* メインの青 */
    --dark-blue: #003366;    /* 濃い青（イントロなど） */
    --accent-orange: #ff9900; /* コンバージョンボタン */
    --bg-light: #eef7ff;     /* 薄い水色の背景 */
    --text-color: #333333;
    --white: #ffffff;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--white);
}

/* コンテナ（コンテンツ幅の制限） */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 480px) {
  .container {
    padding: 0 10px;
  }
}
img {
    max-width: 100%;
    height: auto;
}

/* --- 共通クラス --- */
.section-title {
    text-align: center;
    font-size: 28px;
    color: var(--primary-blue);
    margin-bottom: 40px;
    font-weight: 700;
}

.section-title-white {
    text-align: center;
    font-size: 28px;
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 700;
}

.section-title-en {
    text-align: center;
    font-size: 32px;
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
/* おすすめ・概要セクション用見出し色調整 */
.recommend-section .section-title-en,
.overview-section .section-title-en {
    color: var(--white);
}

.sub-title {
    text-align: center;
    color: var(--white);
    margin-bottom: 40px;
}

/* --- ボタン --- */
.btn-primary {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background: linear-gradient(to bottom, #ffaa33, #ff8800);
    color: var(--white);
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: opacity 0.3s;
}
.btn-primary:hover {
    opacity: 0.9;
}

/* --- セクションごとのスタイル --- */
/* --- メインビジュアルセクション --- */
.hero-section {
    width: 100%;
}

/* 画像エリア */
.hero-image-wrapper {
    width: 100%;
    line-height: 0;
}
.hero-main-image {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 下部情報エリア（青い帯） */
.hero-info-area {
    background-color: var(--primary-blue);
    padding: 2rem 0;
    color: #fff;
}

.hero-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 左側：参加費・会場情報 */
.hero-info-left {
    text-align: center;
}

.info-price {
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0 0 0.625rem;
    line-height: 1.2;
    letter-spacing: 0.15em;
}

.info-type-badge {
    display: inline-block;
    background-color: #0047CA;
    padding: 0.3125rem 1rem;
    border-radius: 2rem;
    width: calc(100% - 1rem);
    font-size: 1.85rem;
    margin-bottom: 0.625rem;
    font-weight: bold;
}

.info-type-badge  .font-size-xs{
    font-size:0.95rem
}


.info-type-badge  .font-size-xxs{
    font-size:0.75rem
}

.info-venue {
    font-size: 1rem;
    margin: 0;
}

.venue-label {
    display: inline-block;
    background-color: #002568;
    padding: 0.125rem 1.5rem;
    border-radius: 2rem;
    margin-right: 0.3125rem;
}

/* 右側：日時情報ボックス */
.hero-info-date-box {
    background-color: #fff;
    color: var(--text-color, #333);
    border-radius: 0.5rem;
    display: flex;
    overflow: hidden;
}

.date-box-label {
    background-color: #A1D7F5;
    color: #003AA5;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 1.5rem 0.85rem 1rem;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5em;
    font-size: 1.5rem;
}

.date-box-content {
    padding: 1rem 1.5rem;
    text-align: center;
}

.date-main {
    font-family: 'M PLUS 1p', sans-serif;
    color: var(--primary-blue);
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
}

.date-year {
    font-size: 1.6rem;
    font-weight: normal;
}

.date-date {
    font-size: 4.5rem;
    font-weight: bold;
}

.date-day-circle {
    display: inline-block;
    background-color: #add8e6;
    color: var(--primary-blue);
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 100;
    position: relative;
}

.date-time {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
}

.open-time {
    font-size: 1rem;
    font-weight: normal;
}

/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 980px) {
    .hero-info-container {
        flex-direction: column;
        gap: 1.25rem; /* 20px */
    }

    .hero-info-date-box {
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
        max-width: 520px;
    }
    
    .date-box-content {
        padding: 1rem 1.5rem;
        text-align: center;
        flex: 1;
    }

    
}

@media (max-width: 480px) {
.info-price {
    font-size: 2.5rem;
}
    .hero-info-area{
        padding:1rem 0;
    }
.info-type-badge {
    display: inline-block;
    background-color: #0047CA;
    padding: 0.3125rem 1rem;
    border-radius: 2rem;
    width: calc(100% - 2rem);
    font-size: 1rem;
    margin-bottom: 0.625rem;
}
    .date-year {
    font-size: 1rem;
    font-weight: normal;
}

.date-date {
    font-size: 3rem;
    font-weight: bold;
}
.date-box-label{
    
font-size: 1rem;
    
padding: 1rem 0.5rem;
}
    .date-time {
    font-size: 1rem;
    margin: 0;
    font-weight: bold;
}
    .hero-info-container {
        flex-direction: column;
        gap: 1rem;
    }
}
/* --- 日時ボックス内のスケジュール追加スタイル --- */

/* スケジュールリスト全体 */
.date-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 行間の余白 */
    margin-bottom: 0.75rem; /* 注釈との余白 */
    align-items: center; /* 中央揃え */
}

/* 各行 */
.schedule-row {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* バッジと時間の間の余白 */
    font-size: 1.25rem; /* 全体の文字サイズ */
    font-weight: bold;
    flex: 1;
}

/* 丸いバッジ共通 */
.schedule-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 1.5rem; /* 丸くする */
    color: #fff;
    font-size: 0.85rem;
    min-width: 8rem; /* 幅を揃える */
    text-align: center;
    line-height: 1.2;
}

/* オンライン用バッジ色（例：水色系） */
.badge-online {
    background-color: #0088cc; 
}

/* 現地用バッジ色（例：濃い青系） */
.badge-offline {
    background-color: #003366;
}

/* 時間テキスト */
.schedule-time {
    color: var(--primary-blue); /* 既存の青色を使用 */
    font-feature-settings: "palt"; /* 数字の詰め */
    /* flex: 1; */
}

/* 注釈テキスト */
.date-note {
    font-size: 0.75rem; /* 小さく */
    text-align: left; /* 左揃えの方が読みやすい場合が多いですが、中央ならcenterで */
    margin: 0;
    line-height: 1.4;
    color: #666;
    border-top: 1px dotted #ccc; /* 区切り線 */
    padding-top: 0.5rem;
    display: inline-block; /* 幅に合わせて折り返す */
}


/* --- レスポンシブ調整（既存のメディアクエリ内に追加または統合） --- */

@media (max-width: 480px) {
    /* スマホでの微調整 */
    .schedule-row {
        font-size: 1rem;
        gap: 0.5rem;
    }
    
    .schedule-badge {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }
    
    .date-note {
        font-size: 0.7rem;
        text-align: left;
    }
}
/* --- 特典・CTA・導入セクション --- */
.benefit-cta-section {
    background: url('../images/bg-light-network.png') center/cover no-repeat;
    padding: 2.75rem 0 4rem; /* 上60px, 下80px (吹き出しの三角分余白を確保) */
}


/* --- 特典ボックス全体 --- */
.benefit-box {
    background: #fff; /* 背景色（画像に合わせて薄いクリーム色にするなら #fffcf5） */
    border: 2px solid #F66201; /* 外枠の濃いオレンジ */
    max-width: 50rem; /* 800px */
    margin: 0 auto 3.125rem; /* 下のボタンとの余白 50px */
    box-sizing: border-box;
}

/* ヘッダー「参加者特典」 */
.benefit-header {
    background: #F66201; /* 濃いオレンジ */
    color: #fff;
    text-align: center;
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    padding: 0.5rem 0;
    margin: 0;
}

/* ボックスの中身 */
.benefit-body {
    padding: 1rem 2rem 2rem; /* 32px 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* 20px */
    background: #FFF8F0;
}

/* アイコンエリア */
.benefit-icon-area {
    flex-shrink: 0;
    width: 9rem; /* 100px */
}
.benefit-icon-img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト情報エリア */
.benefit-info-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 「無料」バッジ */
.badge-free-wrapper {
    margin-bottom: 0.3125rem; /* 5px */
}
.badge-free {
    display: inline-block;
    border: 1px solid #ff6600;
    color: #ff6600;
    font-weight: bold;
    border-radius: 6.25rem; /* 丸くする */
    padding: 0.125rem 3rem; /* 横長にする 48px */
    font-size: 1.25rem; /* 16px */
    background: #fff;
    letter-spacing: 0.1em;
    width: calc(100% - 20rem);
    text-align: center;
}

/* メインテキスト（サイバーリスク〜） */
.benefit-main-text {
    font-size: 1.5rem; /* 24px - 調整してください */
    font-weight: bold;
    color: #333;
    margin: 0 0 0.9375rem; /* 15px */
    text-align: center;
    line-height: 1.3;
}
.text-orange {
    color: #ff5500; /* 赤みの強いオレンジ */
    font-size: 1.3em; /* 周りより少し大きく */
}
.text-plus {
    font-size: 0.8em;
    margin: 0 0.2rem;
    vertical-align: middle;
}

/* 会場参加者限定特典（帯） */
.badge-venue-wrapper {
    background: #ff9900; /* 明るいオレンジ */
    text-align: center;
    padding: 0.25rem 0;
    margin-bottom: 0.625rem; /* 10px */
    border-radius: 0.25rem; /* 4px */
}
.badge-venue {
    color: #fff;
    font-weight: bold;
    font-size: 1.25rem; /* 14px */
}

/* サブテキスト（講師・松尾氏〜） */
.benefit-sub-text {
    margin: 0;
    text-align: center;
    font-weight: bold;
     /* 15px */
    font-size: 1.15rem;
}


/* --- CTAボタン --- */
.cta-button-wrapper {
    text-align: center;
    width: 100%;
    padding: 0 1rem; /* 左右の余白 */
    box-sizing: border-box;
}

.cta-button-large {
    display: flex; /* Flexboxで文字とアイコンを配置 */
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 48rem; /* 768px */
    margin: 0 auto;
    
    /* グラデーションと影 */
    background: linear-gradient(to bottom, #ffaa33 0%, #ff6600 100%);
    box-shadow: 0 0.3125rem 0.85rem rgba(0, 0, 0, 0.5), /* 全体の影 */
                inset 0 1px 0 rgba(255, 255, 255, 0.8); /* 上部のハイライト */
    color: #fff;
    font-size: 2rem; /* 32px */
    font-weight: bold;
    text-decoration: none;
    padding: 1.25rem 1rem; /* 上下20px */
    border-radius: 3.125rem; /* 50px */
    letter-spacing: 0.05em;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    
    /* 文字のシャドウ（少し可読性を上げるため） */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.cta-button-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(to bottom, #ffbb44 0%, #ff7700 100%); /* ホバー時少し明るく */
}

/* ボタン内の矢印アイコン（CSSで作成） */
.cta-arrow-icon {
    display: inline-block;
    width: 2rem; /* 32px */
    height: 2rem;
    background: #fff;
    border-radius: 50%;
    margin-left: 1.5rem; /* 文字との距離 */
    position: relative;
    flex-shrink: 0; /* 縮まないようにする */
}

.cta-arrow-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%; /* 少し右寄りに見えるように調整 */
    transform: translate(-50%, -50%);
    
    /* 三角形を作る */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4375rem 0 0.4375rem 0.625rem; /* 三角のサイズ 7px 0 7px 10px */
    border-color: transparent transparent transparent #ff6600; /* 色 */
}

/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    /* 特典ボックス */
    .benefit-body {
        flex-direction: column; /* 縦並び */
        padding: 1.5rem 1rem;
        gap: 0rem;
    }
    
    .benefit-icon-area {
        width: 5rem; /* 80px */
        margin-bottom: 1rem;
    }

    .benefit-main-text {
        font-size: 1.125rem; /* 18px */
    }
    .text-orange {
        display: block; /* SPでは改行してもいいかも */
        margin-bottom: 0.2rem;
    }
    
    .benefit-sub-text {
        font-size: 0.8125rem; /* 13px */
        text-align: left; /* SPは左揃えの方が読みやすい場合がある */
    }

    /* ボタン */
    .cta-button-large {
        font-size: 1.25rem; /* 20px */
        padding: 1rem;
    }
    .cta-arrow-icon {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 0.75rem;
    }
    .cta-arrow-icon::after {
        border-width: 0.3125rem 0 0.3125rem 0.4375rem; /* 小さくする */
    }
    .badge-free {
    display: inline-block;
    border: 1px solid #ff6600;
    color: #ff6600;
    font-weight: bold;
    border-radius: 6.25rem; /* 丸くする */
    padding: 0.125rem 3rem; /* 横長にする 48px */
    font-size: 1.25rem; /* 16px */
    background: #fff;
    letter-spacing: 0.1em;
    width: calc(100% - 6rem);
}
    .benefit-box{
        margin-bottom:1rem
        
    }
    .cta-button-wrapper {
    width: calc(100% - 2rem);
}
}

/* --- 問題提起（青い吹き出し） --- */
.intro-bubble {
    background-image: url('../images/bg-intro-texture.png');
    background-size: cover;
    background-color: #1C3F7D;
    background-position: center;
    background-blend-mode: overlay; /* 背景と色をなじませる */
    color: #fff;
    padding: 2rem 2rem 4rem;
    border-radius: 1.25rem; /* 20px */
    text-align: center;
    position: relative;
    max-width: 50rem; /* 800px */
    margin: 0 auto;
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
}

/* 下の三角（吹き出しのしっぽ） */
.intro-bubble::after {
    content: '';
    position: absolute;
    bottom: -1.875rem; /* -30px */
    left: 50%;
    transform: translateX(-50%);
    border-top: 2rem solid #1c3f7d; /* 本体の色と同じに */
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
}

.intro-bubble-content {
    position: relative;
    z-index: 1;
}

.intro-badge {
    display: inline-block;
    background: #8ab6ff; /* 薄い青 */
    color: #002255;
    font-weight: bold;
    padding: 0.3125rem 5rem;
    border-radius: 1.5rem;
    font-size: 1.5rem; /* 18px */
}

.intro-lead {
    font-size: 1.5rem; /* 18px */
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-weight: bold;
}

.intro-main-text {
    display: inline;
    border-bottom: 2px dotted #ffffff;
    border-top: none;
    padding: 0 0 5px 0;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.intro-main-text strong{
    font-size: 4rem;
}

.text-yellow {
    color: #ffcc00; /* 黄色強調 */
    font-size: 1.2em; /* 周りより少し大きく */
}

.intro-source {
    font-size: 0.75rem; /* 12px */
    opacity: 0.8;
    margin-bottom: 1rem;
    text-align: center;
}

.intro-footer-text {
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    margin: 0;
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .offer-intro-section {
        padding: 2.5rem 1rem 4rem;
    }

    /* 特典ボックス */
    .benefit-content {
        flex-direction: column;
        text-align: center;
    }
    .benefit-icon {
        width: 4rem;
        margin: 0 auto;
    }
    .benefit-main {
        justify-content: center;
    }
    .benefit-sub {
        flex-direction: column;
        align-items: center;
    }
    .benefit-sub-text {
        text-align: center;
    }
    
    /* CTA */
    .btn-cta {
        font-size: 1.125rem; /* 18px */
        padding: 1rem;
    }

    /* 吹き出し */
    .intro-main-text {
        font-size: 1.4rem; /* 24px */
    }
    .text-yellow {
        font-size: 1.1em;
    }
    .intro-footer-text {
        font-size: 1.125rem; /* 18px */
    }

    /* --- 問題提起（青い吹き出し） --- */
    .intro-bubble {
        margin: 0 2rem;
        padding: 2rem 1.5rem;
    }
    .intro-main-text strong{
    font-size: 2rem;
}

    .intro-badge {
    padding: 0.3125rem 1.5rem;
    border-radius: 1.5rem;
    font-size: 1.25rem; 
    }

    .intro-lead {
    font-size: 1rem;
}
}

/* --- サプライチェーン危機セクション --- */
.supply-chain-section {
    background-color: #E2F4FF; /* 全体背景と同じ薄い水色 */
    padding: 3rem 0; /* 上下 80px */
    margin-top: 5rem;
}

/* 見出しエリア */
.section-header {
    text-align: center;
    margin-bottom: 2.125rem; /* 50px */
}

/* 「自社は大丈夫〜」のバッジ */
.header-badge {
    display: inline-block;
    border: 2px solid var(--primary-blue); 
    color: var(--primary-blue); 
    font-weight: bold;
    font-size: 1.35rem; 
    padding: 0.25rem 2rem;
    border-radius: 1.875rem; 
    background: #fff;
    margin-bottom: 1.25rem; 
    position: relative;
}

/* メインタイトル */
.section-main-title {
    font-size: 2rem; /* 32px */
    color:var(--primary-blue); /* 青 */
    font-weight: bold;
    margin: 0;
}

/* コンテンツエリア（フレックスボックスで横並び） */
.supply-content {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 垂直方向中央揃え */
    gap: 3.125rem; /* 画像とテキストの間隔 50px */
}

/* 画像エリア */
.supply-image {
    width: 45%; /* PCでの幅 */
    max-width: 25rem; /* 400px */
}
.supply-image img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); /* イラストに少し影をつける */
}

/* テキストエリア */
.supply-text {
    width: 50%; /* PCでの幅 */
    font-size: 1rem; /* 16px */
    line-height: 1.8; /* 行間広め */
    color: #333;
}

.supply-text p {
    margin-bottom: 1.5rem; /* 段落ごとの余白 */
    text-align: justify; /* 両端揃え（きれいに見せるため） */
}
.supply-text p:last-child {
    margin-bottom: 0;
}

/* 最後の段落だけ強調したい場合 */
.highlight-text {
    font-weight: bold;
    color: #002244; /* 少し濃い色に */
}

/* PCのみの改行制御 */
.pc-only {
    display: inline;
}
.sp-only {
    display: none;
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .supply-chain-section {
        padding: 3.75rem 0; /* 上下 60px */
    }

    .section-main-title {
        font-size: 1.5rem; /* 24px */
        line-height: 1.4;
    }

    /* 縦並びにする */
    .supply-content {
        flex-direction: column;
        gap: 2rem;
    }

    .supply-image {
        width: 80%; /* スマホでは画像を少し大きく */
        max-width: 18.75rem; /* 300px */
    }

    .supply-text {
        width: 100%;
    }

    /* 改行の制御 */
    .pc-only {
        display: none; /* スマホでは強制改行を無効化 */
    }
}

@media (max-width: 450px) {
        .intro-bubble {
        margin: 0 1rem;
        padding: 2rem 1.5rem;
    }
    .intro-badge {
        padding: 0.3125rem 1.5rem;
        font-size: 1rem;
    }
    .intro-main-text {
        font-size: 1.15rem;
    }
    .header-badge {
    font-size: 1.1rem; 
    padding: 0.25rem 2rem;
    border-radius: 1.875rem; 
}
        .section-main-title {
        font-size: 1.15rem;
        line-height: 1.4;
    }
    
}


/* 吹き出しの三角などを表現する場合は:afterを使用 */
.intro-section::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 20px solid var(--dark-blue);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
.intro-text {
    font-size: 18px;
}
.highlight {
    color: #ffd700; /* 黄色 */
    font-size: 1.5em;
}


/* --- 課題提起セクション --- */
.problems-section {
    background-color: #CDECFF; /* 薄い水色 */
    padding: 1.75rem 0 9.25rem; /* 下の余白はカーブが重なる分多めに (100px) */
    position: relative;
    z-index: 1;
}

/* タイトル周り */
.problems-title-area {
    text-align: center;
    margin-bottom: 2.125rem; /* 50px */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.problems-title {
    color: #003AA5;
    font-weight: bold;
    font-size: 1.85rem;
    line-height: 1.4;
    text-align: center;
    margin: 0;
}
.title-sub {
    font-size: 1.25rem; 
    color: #333;
    font-weight: bold;
}
.title-small {
    font-size: 1.5rem; 
}

.title-deco {
    height: 4.375rem;
    width: auto;
}

/* グリッドレイアウト */
.problems-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    position: relative;
}

/* 左右のリスト */
.problems-list {
    width: 21.875rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 課題ボックス */
.problem-box {
    background: #fff;
    border: 2px solid #0066cc; /* 青枠 */
    border-radius: 0.625rem; /* 10px */
    padding: 2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
}

.box-icon {
    width: 1.5rem; /* 24px */
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.box-text {
    margin: 0;
    font-size: 0.9375rem; /* 15px */
    font-weight: bold;
    color: #333;
    line-height: 1.5;
}

/* 中央画像 */
.problems-center-image {
    width: 15.625rem; /* 250px */
    flex-shrink: 0;
    text-align: center;
}
.problems-center-image img {
    max-width: 100%;
    height: auto;
}


/* --- 解決策ブリッジセクション --- */
.solution-bridge-section {
    position: relative;
    background-color: #fff;
    padding-bottom: 2rem;
    z-index: 2;
     /* 少し上に被せる */
    margin-top: 0rem;
}

/* カーブの装飾（CSSで作成） */
.curve-decoration {
    position: absolute;
    top: -4.125rem; /* 50px上に突き出す */
    left: 0;
    width: 100%;
    height: 4.25rem; /* 100px */
    background-color: #fff;
    border-radius: 50% / 100% 100% 0 0; /* 楕円形のカーブを作る */
    z-index: -1; /* コンテンツの後ろへ */
}

.solution-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
     /* カーブの下から開始 */
}

/* 人物画像 */
.solution-image {
    width: 15.625rem; /* 250px */
}

/* テキストエリア */
.solution-text-area {
    text-align: center;
}

.solution-header-deco {
    color: #0044cc;
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}
.sparkle {
    color: #ffaa00; /* キラキラの色 */
}

.solution-lead {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
}

.solution-highlight-box {
    background-color: #003366; /* 濃い紺色 */
    color: #fff;
    display: inline-block;
    font-size: 1.75rem; /* 28px */
    font-weight: bold;
    padding: 0.5rem 2rem;
    margin: 0.625rem 0;
}

.solution-connect {
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0.625rem 0;
}

.solution-end {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: 0.5rem;
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    /* 課題セクション */
    .problems-title-area {
        flex-direction: column; /* 括弧を上下にするか、あるいは非表示にする */
        gap: 0.5rem;
    }
    .title-deco {
        display: none; /* スマホでは狭くなるので括弧装飾は消すのが一般的 */
        /* 表示したい場合は width: 30px; transform: rotate(90deg); などで調整 */
    }
    
    .problems-grid {
        flex-direction: column; /* 縦積み */
    }

    .problems-list {
        width: 100%; /* 横幅いっぱい */
        order: 2; /* 画像の下にリストを持ってくる場合 */
    }
    
    .problems-center-image {
        width: 12.5rem; /* 200px */
        order: 1; /* 画像を一番上に */
        margin-bottom: 1.25rem;
    }

    /* 解決策セクション */
    .solution-content {
        flex-direction: column;
    }
    
    .solution-image {
        width: 9.375rem; /* 150px */
    }

    .solution-highlight-box {
        font-size: 1.25rem; /* 20px */
        padding: 0.5rem 1rem;
        display: block; /* スマホでは横幅いっぱいにしても良い */
    }
}

@media (max-width: 450px) {
        .supply-content {
        flex-direction: column;
        gap: 1rem;
    }
}

/* --- 解決策テキストエリア詳細 --- */
.solution-text-area {
    text-align: center;
    color: #333;
}

/* ヘッダー装飾（点線と文字） */
.solution-header-deco {
    color: #0044cc; /* 青文字 */
    font-weight: bold;
    font-size: 1.5rem; /* 24px */
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem; /* 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* 斜めの点線を作る */
.deco-dots {
    display: block;
    width: 2.25rem; /* 長さ */
    height: 3px;    /* 線の太さ（点線のサイズ） */
    border-top: 3px dotted #0044cc; /* 点線 */
    transform: rotate(45deg); /* 左側の角度 */
}
/* 右側の点線（逆向き） */
.deco-dots.reverse {
    transform: rotate(-45deg);
}


/* リード文と接続詞 */
.solution-lead,
.solution-connect {
    font-size: 1.25rem; /* 18px */
    margin: 0; /* 下に10px */
    font-weight: normal;
    color: #222;
}

/* 強調ボックスの行 */
.solution-highlight-row {
    margin: 0;
}

/* 青背景のボックス共通設定 */
.solution-highlight-box {
    display: inline-block;
    background-color: #003AA5; /* 濃い青 */
    color: #fff;
    font-weight: bold;
    font-size: 1.8
        rem; /* 28px */
    padding: 0.3em 1em; /* 上下左右の余白 */
    line-height: 1.2;
}

/* 最後の行（ボックスとテキストの並び） */
.last-row {
    display: flex;
    align-items: baseline; /* ベースラインで揃える */
    justify-content: center;
    gap: 0.5rem; /* ボックスと文字の間隔 */
    flex-wrap: wrap; /* スマホで折り返せるように */
}

/* 「を解説します。」のテキスト */
.solution-end-text {
    font-size: 1.25rem; /* 20px */
    font-weight: normal;
    color: #222;
}

/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .solution-header-deco {
        font-size: 1.25rem; /* 20px */
    }
    
    .solution-highlight-box {
        font-size: 1.375rem; /* 22px */
        padding: 0.3em 0.8em;
    }
    
    .solution-end-text {
        font-size: 1.125rem; /* 18px */
    }
}

/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    /* 課題セクション */
    .problems-title-area {
        flex-direction: column; /* 括弧を上下にするか、あるいは非表示にする */
        gap: 0.5rem;
    }
    .title-deco {
        display: none; /* スマホでは狭くなるので括弧装飾は消すのが一般的 */
        /* 表示したい場合は width: 30px; transform: rotate(90deg); などで調整 */
    }
    
    .problems-grid {
        flex-direction: column; /* 縦積み */
    }

    .problems-list {
        width: 100%; /* 横幅いっぱい */
        order: 2; /* 画像の下にリストを持ってくる場合 */
    }
    
    .problems-center-image {
        width: 12.5rem; /* 200px */
        order: 1; /* 画像を一番上に */
        margin-bottom: 1.25rem;
    }

    /* 解決策セクション */
    .solution-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .solution-image {
        width: 9.375rem; /* 150px */
    }

    .solution-highlight-box {
        font-size: 1.25rem; /* 20px */
        padding: 0.5rem 1rem;
        display: block; /* スマホでは横幅いっぱいにしても良い */
    }
}



.curriculum-section {
    background-color: #ECF3F8;
    background-image: url('../images/bg-wave.png');
    background-repeat: no-repeat;
    background-position: center bottom; /* 下中央に配置 */
    background-size: 100% auto; /* 横幅いっぱいに広げる */
    padding-bottom: 18vw;
    padding-top: 4rem;
}

/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .curriculum-section {
        /* SPでは波の高さが変わるので余白を調整 */
        padding-bottom: 30vw;
    }
}



/* --- カリキュラムヘッダー修正版 --- */
.curriculum-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

/* メインタイトル */
.curriculum-main-title {
    color: #222;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 0 0.5rem; 
    letter-spacing: 0.05em;
    
    /* 文字のベースラインを揃える設定 */
    display: flex;
    justify-content: center;
    align-items: baseline; 
    gap: 0.2em;
}

/* 大きい文字（セミナー、学べること） */
.curriculum-main-title .text-lg {
    font-size: 2.5rem;
}

/* 小さい文字（で） */
.curriculum-main-title .text-sm {
    font-size: 1.75rem;
}


/* 英語サブタイトル */
.curriculum-sub-en {
    color: #003AA5;
    font-size: 1rem; 
    font-weight: bold;
    margin: 0 0 1.5rem; /* バッジとの余白 */
    letter-spacing: 0.05em;
    font-family: 'Arial', sans-serif; /* 英語用フォント */
}


/* カプセル型バッジ */
.curriculum-badge-wrapper {
    display: flex;
    justify-content: center;
}

.curriculum-pill-badge {
    display: inline-block;
    border: 3px solid #003AA5;
    color: #003AA5;
    background: #fff;
    padding: 0.25rem 3rem;
    border-radius: 3.125rem;
    font-weight: bold;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

/* 「4つ」の数字強調 */
.num-highlight {
    font-size: 1.1em; /* 周りより少し大きく */
    font-family: 'Arial', sans-serif; /* 数字を見やすく */
    margin: 0 0.1em;
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .curriculum-main-title .text-lg {
        font-size: 1.75rem; /* 28px */
    }
    .curriculum-main-title .text-sm {
        font-size: 1.25rem; /* 20px */
    }
    
    .curriculum-pill-badge {
        font-size: 1rem; /* 16px */
        padding: 0.5rem 1.5rem; /* スマホでは少しコンパクトに */
        width: 90%; /* 横幅いっぱいに広げる */
        box-sizing: border-box;
    }
}

/* カード本体 */
.curriculum-card {
    background: #fff;
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.08); /* ふんわりした影 */
    padding: 2.5rem 3rem; /* 40px 48px */
    position: relative;
}



.card-visual {
    width: 10rem; /* 160px */
    flex-shrink: 0;
}
.card-visual img {
    width: 100%;
    height: auto;
}

.card-header-text {
    flex-grow: 1;
    position: relative;
    padding-top: 1rem; /* 番号の分スペースを確保 */
}

/* 番号 (01, 02) */
.card-number {
    position: absolute;
    top: -1.5rem; /* タイトルの上に配置 */
    right: 0;
    font-size: 4rem; /* 64px */
    font-weight: bold;
    color: #89c4f4; /* 明るめの水色 */
    font-family: 'Arial', sans-serif;
    line-height: 1;
}

/* --- 上部エリア --- */
.card-header-area {
    display: flex;
    align-items: flex-end; /* 下揃えでバランスをとる */
    gap: 2rem;
    position: relative;
}

.card-header-text {
    /* ▼ 重要な変更点 */
    flex-grow: 0;        /* 勝手に伸びないようにする（超重要） */
    width: fit-content;  /* 中身（文字）の幅に合わせる */
    margin-left: auto;   /* 左側に余白を作って右に寄せる */
    
    /* ▼ 以下はそのまま */
    position: relative;
    padding-top: 2rem;
    text-align: left;
}

/* 区切り線 */
.card-separator {
    width: 100%; /* 親要素（header-text）の幅いっぱい＝文字幅になる */
    height: 4px;
    background-color: #003399;
    border-radius: 2px;
    margin-top: 1rem; /* タイトルとの余白 */
}

/* --- 下部エリア --- */
.card-lead {
     /* 15px */
    font-weight: bold;
}

/* 詳細ボックス（トピック）群 */
.card-topics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 個別の青いボックス */
.topic-box {
    background-color: #eff6fa; /* 非常に薄い青灰色の背景 */
    padding: 1.25rem; /* 20px */
    border-radius: 0.25rem; /* 4px */
}

.topic-title {
    color: #0044cc;
    font-size: 1rem; /* 16px */
    font-weight: bold;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
}

/* タイトル前の青い丸ポチ */
.topic-title::before {
    content: '';
    display: inline-block;
    width: 0.5rem; /* 8px */
    height: 0.5rem;
    background-color: #0044cc;
    border-radius: 50%;
    margin-right: 0.625rem; /* 10px */
}

.topic-desc {
    font-size: 0.875rem; /* 14px */
    margin: 0;
    line-height: 1.6;
    padding-left: 1.125rem; /* 丸ポチの分だけインデント */
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .curriculum-card {
        padding: 1.5rem;
    }

    .card-header-area {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .card-visual {
        width: 6.25rem; /* 100px */
        margin: 0 auto;
    }
    
    .card-number {
        position: static; /* SPでは通常配置に戻す */
        font-size: 3rem;
        color: #89c4f4;
        margin-bottom: 0.5rem;
        display: block;
        text-align: center;
    }
    
    .card-header-text {
        padding-top: 0;
    }

    .card-title {
        font-size: 1.25rem;
        text-align: center;
    }
    
    /* SPでのボックス内インデント調整 */
    .topic-desc {
        padding-left: 0; /* 狭いのでインデント解除 */
        margin-top: 0.3rem;
    }
}

/* Scenario */
.scenario-section {
    padding: 60px 0;
    background-color: var(--bg-light);
}
.check-list {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.check-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    padding-left: 30px;
    position: relative;
}
.check-item::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: bold;
}



/* --- カリキュラムリスト --- */
.curriculum-list {
    display: flex;
    flex-direction: column;
    /* カードの頭が飛び出す分、カード間の余白を広めに取る */
    gap: 5rem;
    max-width: 50rem;
    margin: 0 auto;
    padding-top: 3rem; /* 最初のカードが上の要素に被らないよう余白確保 */
}



/* カード本体 */
.curriculum-card {
    background: #fff;
    border-radius: 1rem; /* 16px */
    /* 影を下方向に少し強めにつけて浮遊感を出す */
    padding: 0 3.5rem 3.5rem; /* 上のpaddingは0にして、画像等の配置で調整 */
    position: relative;
    overflow: visible; /* 重要：はみ出した部分を表示させる */
    margin-top: 2rem; /* カード自体も少し隙間をあける */
}

/* 画像エリア（はみ出し設定） */
.card-visual {
    width: 12rem; /* 192px */
    flex-shrink: 0;
    margin-top: -3.5rem; /* マイナスマージンで上に引き上げる */
    position: relative;
    z-index: 2; /* 文字より手前に */
}
.card-visual img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像自体の影（ドロップシャドウ） */
    /* filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.15)); */
}


/* 番号 01（はみ出し設定） */
.card-number {
    position: absolute;
    top: -4.5rem; /* カードの上辺よりさらに上に配置 */
    right: -14px;
    font-size: 6rem; /* 96px */
    font-weight: bold;
    color: #8ab6ed; /* 画像に近い水色 */
    font-family: 'Arial', sans-serif;
    line-height: 1;
    z-index: 1;
    /* 文字の袋文字（白フチ）をつける場合 */
}

/* タイトル */
.card-title {
    font-size: 2.4rem; /* 28px */
    color: #333;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 1rem;
    position: relative;
    z-index: 2;
}
.card-title.large {
    font-size: 2.2rem;
}
.text-blue {
    color: #0044cc;
}

/* 区切り線 */
.card-separator {
    width: 100%;
    height: 4px; /* 少し太く */
    background-color: #003399;
    border-radius: 2px;
}



.card-lead {
    font-size: 1.125rem;
     /* 画像を見ると普通の太さっぽいのでnormalに */
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* 詳細ボックス群 */
.card-topics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 青い詳細ボックス */
.topic-box {
    background-color: #eff6fa; /* 薄い青 */
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
}

.topic-title {
    color: #0044cc;
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
}
.topic-title::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #0044cc;
    border-radius: 50%;
    margin-right: 0.75rem;
}

.topic-text {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
    margin: 0;
    padding-left: 1.25rem;
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .curriculum-list {
        gap: 4rem;
        padding-top: 2rem;
    }

    .curriculum-card {
        padding: 0 1.5rem 2rem;
    }

    .card-header-area {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .card-visual {
        width: 10rem;
        margin-top: -3rem; /* SPでも飛び出しを維持 */
        margin-bottom: 1rem;
    }

    .card-number {
        position: static; /* SPでは配置をリセットして通常フローに戻すか、位置を調整 */
        margin-bottom: 0.5rem;
        font-size: 3rem;
        top: auto;
        right: auto;
    }
    
    .card-header-text {
        padding-top: 0;
        width: 100%;
    }
    
    .topic-text {
        padding-left: 0;
    }
    .card-title {
    font-size: 1.65rem; /* 28px */
}
    .card-title.large {
    font-size: 1.6rem;
}
}

@media (max-width: 450px) {
        .card-title {
        font-size: 1.2rem;
    }
        .card-title.large {
    font-size: 1.2rem;
}
.card-lead {
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.8;
}
}
    
/* サブタイトル "このような企業様におすすめです" */
.recommend-sub {
    font-size: 1.5rem;
    font-weight: normal;
    margin: 0rem 0 4.5rem;
    color: #1A1A1A;
    text-shadow: none;
}

/* リスト全体の設定 */
.recommend-list {
    max-width: 1000px;
    margin: 0 auto 5rem;
}

/* カード単体の設定 */
.recommend-card {
    background: #fff;
    border-radius: 1.25rem;
    width: 17rem;
    padding: 0 1.25rem 2.5rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 50, 150, 0.15);
    color: #003399;
    position: relative;
    margin-top: 4rem;
    box-sizing: border-box;
}

/* 画像ラッパー（飛び出し設定） */
.rec-img-wrapper {
    height: 11rem;
}

/* text-noteは改行されるので上部に少し余白 */
.text-note {
    margin-top: 0.25rem;
}


/* --- レスポンシブ対応 (SP) の調整 --- */
@media (max-width: 768px) {
    .recommend-section {
        background: linear-gradient(to bottom, #89c4f4, #5daadd); 
    }
}



/* --- 下部ターゲットボックス（画像再現版） --- */
.target-audience-box {
    /* 背景色を薄い水色に変更 */
    background: #E9F1F8;
     /* 16px */
    max-width: 55rem; /* 900px */
    margin: 0 auto;
    position: relative;
    padding: 2rem 0rem 2rem;
    /* ふんわりとした影 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    color: #333;
    box-sizing: border-box;
    border: 24px solid #fff;
}

/* 「本セミナーは」の青いヘッダー */
.target-header-pill {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, -50%); /* 半分上に飛び出す */
    background-color: #0061D0; /* 鮮やかな青 */
    color: #fff;
    font-weight: bold;
    font-size: 1.75rem; /* 24px */
    letter-spacing: 0.05em;
    padding: 0.25rem 12rem;
    border-radius: 3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    white-space: nowrap;
}

/* 吹き出しの三角（下向き） */
.target-header-pill::after {
    content: '';
    position: absolute;
    bottom: -0.6rem; /* 下に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.8rem 0.6rem 0 0.6rem; /* 逆三角のサイズ */
    border-color: #0061d0 transparent transparent transparent; /* 青色 */
}

/* コンテンツエリア */
.target-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem; /* イラストと文字の間隔 */
}

/* イラスト */
.target-visual {
    width: 14rem; /* 224px 画像に合わせて調整 */
    flex-shrink: 0;
}
.target-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側情報エリア */
.target-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃え */
    gap: 0.75rem; /* 行間の調整 */
}

.target-lead {
    font-size: 1.25rem; /* 20px */
    font-weight: bold;
    margin: 0 0 0.5rem; /* 下に少し余白 */
    color: #222;
    padding-left: 0.5rem; /* タグと少し位置を合わせる */
}

/* タグの行 */
.tag-row {
    display: flex;
    gap: 1rem; /* タグ同士の間隔 */
    width: 100%;
}

/* 3行目の配置調整 */
.row-bottom {
    align-items: baseline; /* 文字のベースラインを揃える */
}

/* タグ単体のデザイン */
.tag-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 2px solid #003AA5; /* 青い枠線 */
    color: #003AA5; /* 青い文字 */
    font-weight: bold;
    font-size: 1.5rem; /* 20px */
    padding: 0.4rem 1.5rem;
    border-radius: 2rem; /* 丸く */
    line-height: 1.2;
    white-space: nowrap;
    
    /* 影をつけてボタンっぽく */
    box-shadow: 0 2px 0 rgba(0, 68, 204, 0.1);
}

/* 横長のタグ（IT・情報システム担当者） */
.tag-wide {
    width: 100%; /* 親要素(tag-row)の幅いっぱいに */
    padding: 0.4rem 2rem;
    box-sizing: border-box; /* paddingを含めた幅計算 */
}

/* 「におすすめです」のテキスト */
.target-suffix {
    font-size: 1.25rem; /* 20px */
    font-weight: bold;
    color: #222;
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
    .target-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .target-info {
        align-items: center; /* スマホでは中央揃え */
        width: 100%;
    }
    
    .target-visual {
        width: 10rem;
    }

    .tag-row {
        justify-content: center; /* タグも中央寄せ */
        flex-wrap: wrap;
    }
    
    .tag-item {
        font-size: 1.2rem;
        width: calc(100% - 6rem);
    }
    .tag-item.tag-wide{
        width: calc(100% - 2.5rem);
    }
    .target-header-pill {
      padding: 0.25rem 6rem;
      font-size: 1.5rem;
    }
}


/* --- RECOMMENDED セクション（詳細版） --- */
.recommend-section {
    background: linear-gradient(to right, #b3d7f3, #82bdec, #56a6e6);
    color: #fff;
    text-align: center;
    margin-top: -2px;
    padding-bottom: 8rem;
}



/* --- カードリスト --- */
.recommend-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem 2.5rem;
    margin-bottom: 5rem;
}

/* 画像ラッパー（飛び出し設定） */
.rec-img-wrapper {
    width: 13rem;
    height: 13rem;
    margin: -4rem auto 0.75rem;
    border-radius: 50%;
}

.rec-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキスト */
.rec-text {
    font-weight: bold;
    font-size: 1.05rem; /* 16px ベースを少し大きく */
    line-height: 1.7;
    margin: 0;
    letter-spacing: 0.02em;
}

/* 注釈部分（括弧書き）のスタイル調整 */
.text-small,
.text-note {
    font-size: 0.875rem; 
    display: inline-block; 
}

/* text-noteは改行されるので上部に少し余白 */
.text-note {
    margin-top: 0.25rem;
}


/* --- レスポンシブ対応 (SP) の調整 --- */
@media (max-width: 768px) {
    .recommend-section {
        background: linear-gradient(to right, #b1d6f3, #67aee8);
        margin-top: -1.7rem;
        padding-bottom: 4rem;
    }
    .recommend-list {
        gap: 0.8rem;
    }
    .rec-img-wrapper {
    width: 10rem;
    height: 10rem;
    margin: -4rem auto 0.75rem;
    border-radius: 50%;
}
    .rec-text {
    font-weight: bold;
    font-size: 0.9rem;
}
    .recommend-card {
    width: 12rem;
    padding: 0 0.5rem 2rem;
}

    .text-small, .text-note {
    font-size: 0.75rem;
    display: inline-block;
}
}
@media (max-width: 380px) {
        .rec-img-wrapper {
    width: 8rem;
    height: 8rem;
    margin: -4rem auto 0.75rem;
    border-radius: 50%;
}
        .rec-text {
    font-weight: bold;
    font-size: 0.8rem;
}
    .recommend-card {
    width: 10rem;
    padding: 0 0.5rem 1rem;
}
    .text-small, .text-note {
        font-size: 0.65rem;
        display: inline-block;
    }
}

.overview-table {
    border: 1px solid #cccc;
     /* 角丸のため */
    margin-bottom: 4rem;
    max-width: 980px;
    margin: 0 auto 6rem;
}

.overview-row {
    display: flex;
}

.overview-label {
    background-color: #B7E3FF; /* 薄い水色 */
    color: #0d4a90;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0rem;
    flex-basis: 25%;
    flex-shrink: 0;
    text-align: center;
    border-bottom: 1px solid #6bb3f3;
    align-content: center;
}

.overview-data {
    background-color: #fff;
    color: #333;
    font-size: 1.1rem;
    padding: 2rem 2rem;
    flex-basis: 75%;
    line-height: 1.7;
    border-bottom: 1px solid #ccc;
}
.overview-data .f-small{
   font-size: 0.95rem;
}
.overview-data .f-large{
   font-size: 2rem;
}
.overview-data .note {
    display: block;
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.5rem;
}

.overview-row:last-child  .overview-label,.overview-row:last-child  .overview-data{
    border-bottom: 0;
}


.overview-btn {
    max-width: 60rem;
    margin: 0 auto;
}
/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {

    /* 概要 */
    .overview-table{
        margin-bottom: 2rem;
    }
    .overview-row {
        flex-direction: column; /* 縦積み */
    }
    .overview-label {
        flex-basis: 100%;
        border-bottom: none;
        padding: 1rem;
    }
    .overview-data {
        flex-basis: 100%;
        text-align: center;
        padding: 2rem;
        font-size: 1.65rem;
    }
    .overview-btn {
        max-width: 100%;
    }

    /* 登壇者 */
    .speaker-card {
        flex-direction: column;
        padding: 2.5rem;
    }
    .speaker-image {
        max-width: 20rem;
        margin: 0 auto;
    }
    .speaker-name, .speaker-title{
        text-align: center;
    }

    .overview-data .note {
    font-size: 0.8rem;;
}
    .overview-data .f-small{
   font-size: 0.85rem;
}
}

.section-heading-wrapper{
    text-align: center;
}
.heading-en{
    font-size: 4rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: 0.05em;
    color:#fff
}
.heading-ja{
    font-size: 1.5rem;
    font-weight: normal;
    margin: 0rem 0 4.5rem;
    color: #1A1A1A;
    text-shadow: none;
}
.speakers-overview-wrap{
   background: linear-gradient(90deg, #7BBEF4 0%, #4E95E6 100%);
}
#speakers {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.speaker-card {
    display: flex;
    gap: 3rem;
    align-items: center; /* 上揃え */
    background-color: #fff;
    padding: 2rem 4rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    max-width: 676px;
    margin: auto;
}

.speaker-image {
    flex-basis: 37%;
    text-align: center;
}
.speaker-image img {
    width: 100%;
    max-width: 25rem;
}

.speaker-info {
    flex-basis: 67%;
}

.speaker-name {
    font-size: 2.2rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 2rem;
    margin-top: 1rem;
}
.speaker-name span{
    font-size: 1.3rem;
}
.speaker-title {
    font-size: 1.15rem;
    font-weight: normal;
    color: #333;
    line-height: 1.6;
    margin-bottom: 2rem;
    border-bottom: 1px solid #003AA5;
    padding-bottom: 2rem;
}

.speaker-bio {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
    font-weight: lighter;
}

iframe{
    margin-top: 2rem;
}

/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {
    /* 共通見出し */
    .section-heading-wrapper {
        margin-bottom: 3rem;
        padding-top: 2rem;
    }
    .heading-en {
        font-size: 3rem;
    }
    .heading-ja {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    /* 概要 */
    .overview-table{
        margin-bottom: 2rem;
    }
    .overview-row {
        flex-direction: column; /* 縦積み */
    }
    .overview-label {
        flex-basis: 100%;
        border-bottom: none;
        padding: 0.5rem;
    }
    .overview-data {
        flex-basis: 100%;
        text-align: center;
        padding: 1rem;
        font-size: 1rem;
    }
    .overview-btn {
        max-width: 100%;
    }

    /* 登壇者 */
    .speaker-card {
        flex-direction: column;
        padding: 2rem;
        gap: 0rem;
    }
    .speaker-image {
        max-width: 20rem;
        margin: 0 auto;
    }
    .speaker-name, .speaker-title{
        text-align: center;
        margin-bottom: 1rem;
    }
        iframe{
             height:350px
        }
    #speakers {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
    .speaker-image img {
    width: 100%;
    max-width: 15rem;
}
}
@media (max-width: 450px) {
      .heading-en {
        font-size: 2rem;
    }
    .heading-ja {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

  
}

/* --- OVERVIEW内のスケジュール調整 --- */

/* 日付の文字サイズ調整 */
.overview-date-text {
    font-size: 1.25rem;
    color: #333;
}
.overview-date-text .f-large {
    font-size: 1.5rem;
    font-weight: bold;
}

/* OVERVIEW用の調整モード（左揃えにする） */
.date-schedule-list.overview-mode {
    align-items: flex-start; /* 左揃え */
    
     /* 下に区切り線を入れると綺麗 */
    margin: 0;
}

.date-schedule-list.overview-mode .schedule-row {
    font-size: 1rem; /* 文字サイズを本文に合わせる */
}

.date-schedule-list.overview-mode .schedule-badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.8rem; /* 少しコンパクトに */
    min-width: 4.5rem;
}

.date-schedule-list.overview-mode .schedule-time {
    font-weight: bold;
    font-size: 1.125rem; /* 時間は見やすく少し大きく */
}

/* OVERVIEW内の注釈 */
.overview-note {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    margin: 0;
    color: #666;
}

/* Footer CTA */
.footer-section {
    background: #003AA6;
    padding: 2rem 0 0;
}
.footer-bottom-bar {
    background: #093492;
    padding: 0.25rem 0;
    text-align: center;
    margin-top: 2rem;
    color: #fff;
}
footer .solution-header-deco{
    color:#fff
}
footer .deco-dots{
    border-color: #fff;
}
/* 基本は非表示 */
.sp-only {
    display: none;
}

/* スマホの時だけ表示 */
@media (max-width: 768px) {
    .sp-only {
        display: block; 
    }
    .date-schedule-list.overview-mode {
    align-items:center; /* 左揃え */
}

}