@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');

/* --- 共通リセット & 基本設定 --- */
html {
    font-size: 62.5%;
}

body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    line-height: 1.6;
    color: #000;
    background-color: #fff;
    font-size: 1.6rem; 
}
.no_wrap{
    display: inline-block;
}
/* ---
 サイト全体の「幅」を管理するコンテナ
--- */
.container {
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ---
 各セクション共通の「上下の余白」
--- */
section {
    padding-top: 6rem;    
    padding-bottom: 6rem; 
}

/* --- ▼ 各セクションの背景色指定 ▼ --- */

/* 1. ヒーロー & 2. お悩み (青グラデーション) */
#problems {
    background: #083391;
    color: #fff;
}

/* ヒーローは上の余白を多めに */
#hero {
    padding-top: 8rem; 
}

/* 3. About, 4. 強み, 5. ご利用の流れ, 6. 中間CTA (薄い黄緑) */
#about,
#features,
#flow,
#cta-middle {
    background-color: #f4f9f1;
}

/* 7. 導入企業様の声 (薄い緑〜水色グラデーション) */
#testimonials {
    background: linear-gradient(180deg, #e6f5f3 0%, #d9f0f7 100%);
}

/* 8. 料金, 9. CTA, 10. スキル, 11. FAQ (薄い水色) */
#pricing,
#cta-bottom,
#skills,
#faq {
    background-color: #eaf6fc;
}

/* 12. フッター (白) */
#footer {
    padding-top: 6rem; 
    padding-bottom: 6rem; 
    background-color: #fff;
}



/* ---
 汎用ボタン
--- */

/* 汎用ボタンの基本スタイル */
.btn {
    display: block; /* ブロック要素にして幅いっぱいに */
    width: 100%;
    padding: 1rem 1rem;
    border-radius: 4rem; /* ほぼ円形 */
    text-align: center;
    text-decoration: none;
    font-size: 3.5rem;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    max-width: 800px;
    margin: auto;
}

/* 黄色ボタン（プライマリ） */
.btn-primary {
    background-color: #FFF02D; /* メインの黄色 */
    color: #002360;
    box-shadow: 0 0.85rem 0 #b39c22; /* ボタンの立体感を出す影 */
}

/* ホバー（マウスが乗った時）の挙動 */
.btn-primary:hover {
    background-color: #fffb9a;
    box-shadow: none;
    transform: translateY(0.5rem); /* 少し沈むアニメーション */
}


/* ---
 1. ヒーローセクション (#hero)
--- */

/* 背景グラデーションをデザインに合わせる */
#hero {
    background: linear-gradient(180deg, #84B945 0%, #4BBCC0 50%, #083391 100%);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* メイン画像（上下の余白を調整） */
.hero-image-wrapper {
    text-align: center; /* 画像を中央寄せ */
}

.hero-main-image {
    width: 100%;
    max-width: 920rem; 
    height: auto;
}

/* ---
 1. ヒーローセクション (#hero) 内のCTAエリア修正
--- */

/* 日付・参加費情報ボックス (全体) */
.hero-info-box {
    display: flex;
    align-items: stretch;
    background-color: transparent;
    border-radius: 1rem;
    padding: 0;
    margin-bottom: 3.2rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 10px solid #002360;
}

/* 「参加費無料」エリア (左側・青) */
.hero-info-badge {
    background-color: #002360;
    color: #fff;
    padding: 0.5rem 2.5rem;
    text-align: center;
    flex-basis: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.badge-price {
    font-size: 4.5rem; /* 「参加費無料」 */
    font-weight: bold;
    line-height: 1.3;
    display: block;
    margin-bottom: 0.5rem;
}

.badge-type {
    font-size: 2rem; /* 「オンライン開催」 */
    font-weight: 500;
    display: inline-block;
    padding: 0rem 2rem;
    border: 0.2rem solid #fff;
    border-radius: 3rem;
    width: calc(100% - 20%);
}

/* 日付エリア (右側・白) */
.hero-info-date {
    background-color: #fff;
    color: #002360;
    padding: 1rem 2.5rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hero-info-date strong {
    font-size: 6rem;
    font-weight: bold;
    font-family: 'M PLUS 1p', sans-serif;
    line-height: 1;
    margin-right: 0.5rem;
}

.day-circle {
    font-size: 2.2rem; /* 「金」 */
    font-weight: bold;
    color: #fff;
    background-color: #e6007e; /* ピンク色 */
    border-radius: 50%;
    width: 3.6rem;
    height: 3.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1rem;
}

.time-details {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.4;
    flex-shrink: 0; /* 縮まないように */
    margin-top: 1.35rem;
}

.time-details .open-time {
    font-size: 1.8rem; /* （開場...） */
}

   
@media (max-width: 1024px) { 
    .time-details {
        margin-top: 0.85rem;
    }
}
/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */

@media (max-width: 860px) {

    .badge-price {
        font-size: 2.8rem;
    }

    .badge-type {
        font-size: 1.6rem;
    }

    
    .hero-info-date strong {
        font-size: 4.8rem;
        margin-right: 0;
    }
    
    .time-details {
        font-size: 2rem;
        text-align: center;
        padding-left: 0;
        margin-top: 0.85rem;
    }

    .time-details .open-time {
        font-size: 1.6rem;
    }
    

}
@media (max-width: 768px) {
    /* 土台のコンテナの左右余白を少し減らす */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    #hero {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }


    /* 情報ボックスを縦積みにする */
    .hero-info-box {
        flex-direction: column;
    }

    .hero-info-badge {
        padding: 0rem 1.5rem 1rem;
        flex-basis: auto; /* 幅指定をリセット */
    }

    
    .hero-info-date {
        padding: 1.5rem 1.5rem;
         /* 日付も縦積みに */
        align-items: center; /* 中央揃え */
        gap: 1rem;
    }

    /* ボタンの文字サイズを少し小さく */
    .btn {
        font-size: 2.3rem;
        padding: 1.6rem 1rem;
    }
}

/* ---
 2. お悩みセクション (#problems)
--- */

/* セクション全体 (V字カットあり) */
#problems {
    position: relative; /* 遷移エリアの絶対配置の基準 */
    padding-bottom: 3rem; /* 黒い背景 + 黄色い丸の領域を確保 */
    overflow: visible; /* 丸がはみ出せるように */
    
    /* セクションの下部をV字にカット */
}

/* (1) メイン画像 */
.problem-image-wrapper {
    text-align: center;
}
.problem-main-image {
    width: 100%;
    max-width: 80rem; /* ※書き出す画像の幅に合わせて調整 */
    height: auto;
}

/* (2) お悩みチェックリスト (白い箱) */
.problem-checklist {
    background: #fff;
    border-radius: 1rem;
    padding: 4rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.1);
    max-width: 65rem; /* 最大幅 */
    margin: 0 auto 3rem; /* 中央寄せ */
}

.problem-checklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-checklist li {
    position: relative;
    padding-left: 5rem;
    font-size: 1.95rem;
    padding-bottom: 2rem;
    font-weight: bold;
    line-height: 1.6;
    color: #000000;

}

.problem-checklist li:not(:last-child) {
    margin-bottom: 1.5rem;
    border-bottom: 2px dashed #ccc;
}
.problem-checklist li:last-child {
    padding-bottom:0
}
/* チェックマーク (SVG) */
.problem-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 2.8rem;
    height: 2.8rem;
    background-image: url("../images/check01.svg");
    background-size: 2rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* (3) 課題のまとめ */
.problem-summary {
    color: #fff;
    font-size: 2.85rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

/* 「会社経営」「課題」のスタイル */
.problem-summary .large {
    font-size: 4.2rem;
    font-weight: 900;
}

/* 「課題」の下線スタイル */
.problem-summary .underline {
    position: relative;
    display: inline-block;
    margin: 0 0.5rem;
}

/* 擬似要素(::after)で黄色の下線を引く */
.problem-summary .underline::after {
    content: '';
    position: absolute;
    bottom: -0.8rem;
    left: 0;
    width: 100%;
    height: 0.6rem;
    background-color: #d5e63f;
    border-radius: 0.3rem;
}

/* (4) 次セクションへの遷移エリア (黄色い丸) */
.problem-transition-circle {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: #F1FF56;
    color: #002360;
    border-radius: 50%;
    width: 16rem;
    height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.4;
    padding-top: 1rem;
}



/* ---
 3. seminar-details (の背景)
 (V字カット対応)
--- */

/* #seminar-details セクション自体に基準点と追加の余白を設定 */
#seminar-details {
    position: relative;
    padding-top: 20rem;
    background-color: #f4f9f1; /* 1. 黄色ベース */
    background-image: url('../images/grid-pattern.png'); /* 2. 切り出したパターン画像 */
    background-repeat: repeat;
    background-size: 100px 46px;
    background-position: top left;
}

/* #seminar-details セクションの「前」に黒いV字の背景を挿入 */
#seminar-details::before {
    content: '';
    position: absolute;
    top: 0; /* セクションの最上部 */
    left: 0;
    width: 100%;
    height: 10rem; /* V字の高さ */
    background: #083391; /* ほぼ黒 */
    z-index: 1; /* 黄色い丸(z-index: 2)より下 */

    /* 上向きのV字にカット */
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin-top: -1px;
}

/* #about の中身が背景より手前に来るように */
#seminar-details .container {
    position: relative;
    z-index: 1; /* 黒いV字背景(::before)より手前 */
}


/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {

    /* お悩みセクション */
    #problems {
         
        /* スマホでもV字カット (角度は浅めに) */
         
padding-top: 0rem;
    }
    
    .problem-checklist {
        padding: 2rem;
    }

    .problem-checklist li {
        font-size: 1.6rem;
        padding-left: 4rem;
    }

    .problem-summary {
        font-size: 1.8rem; /* 「そんな」などの基本サイズ */
        line-height: 1.6;
    }

    .problem-summary .no_wrap{
        margin-top:1rem
    }
    
    .problem-summary .large {
        font-size: 2.6rem; /* スマホ用に少し小さく */
    }

    .problem-summary .underline::after {
        bottom: -0.6rem; /* 文字からの距離を調整 */
        height: 0.5rem; /* 下線の太さを調整 */
    }

    /* 黄色い丸 */
    .problem-transition-circle {
        width: 12rem;
        height: 11rem;
        font-size: 2rem;
    }

    /* Aboutセクション */
    #seminar-details {
        padding-top: 14rem;
    }
    #seminar-details::before {
         /* V字の高さをスマホ用に浅くする */
         margin-top: -1px;
    }
}

/* ---
 3. セミナー詳細 (#seminar-details)
--- */

/* セクション内の各ブロックの共通余白 */
.details-block {
    margin-bottom: 4rem;
}
.details-block:last-child {
    margin-bottom: 0;
}

/* (1) About: 3つのポイント */
.about-grid {
    display: flex;
    justify-content: space-between;
    gap: 6rem;
    margin-bottom: 2rem;
}
#about-block .container-large{
    max-width: 125rem;
}
.about-item {
    border-radius: 1rem;
    position: relative;
    text-align: center;
}

.about-item:nth-child(2) {
    margin-top:5rem;
}


.about-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    max-width: 350px;
    margin: auto;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-item p {
    padding: 2rem;
    font-size: 1.6rem;
    line-height: 1.5;
    background: #fff;
    max-width: 75%;
    margin: -2rem auto 0;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
}

/* 上段の黒太文字 */
.about-item p strong {
    font-size: 1.6rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

/* 下段のピンクセリフ */
.about-item .about-highlight {
    font-size: 2rem;
    font-weight: 700;
    color: #c72580;
    display: block;
}


/* 共通: 「〜を解説します」のテキスト */
.details-conclusion {
    font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
    margin-top: 10rem;
}


/* (2) Features: 特長 */
#features-block {
     padding: 5rem;
}

.features-content {
    display: flex;
    align-items: center; /* 左右の高さ中央揃え */
    justify-content: space-between;
    /* gap: 3rem; */
}

.features-text {
    flex-basis: 49%;
    background-color: #ffffff; /* 濃い青色の背景 */
    color: #000; /* テキストを白に */
    border-radius: 2rem; /* 角丸を大きく */
    padding: 5rem 3rem;
    padding-top: 7rem; /* eyebrowの分、多めに確保 */
    position: relative; /* eyebrowの位置基準 */
    text-align: center; /* 中身を中央揃え */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4); /* 影をこちらに移動 */
}

.features-image {
    flex-basis: 50%;
    text-align: center;
    position: relative;
    flex: 1;
}
.features-image img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

/* 「短期間で」のカプセル */
.features-eyebrow {
    display: inline-block;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    padding: 0.8rem 5rem;
    width: calc(100% - 50%);
    border-radius: 3rem;
    background: linear-gradient(90deg, #083391 0%, #0BC0C7 50%, #9CDE4D 100%);
    
    /* 位置を調整 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* 上辺にオーバーラップさせる */
}

.features-title {
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 700;
     /* 白文字に変更 */
    margin-bottom: 2rem;
}

/* 黄色いボックス */
.features-box {
    background: #FFFF76; /* 薄い黄色に変更 */
    font-size: 3.4rem;
    font-weight: 900; /* 1行目の太さ */
    text-align: center;
    line-height: 1.5;
    padding: 1.5rem;
    border-radius: 3rem; /* 角丸を強く */
    margin-bottom: 2rem;
}

.features-box span {
    display: block; /* 2行にする */
}

/* 2行目のスタイル (ピンク色) */
.features-box .box-line {
    font-weight: 900;
    color: #c72580; /* ピンク色 (aboutセクションと同じ) */
}


/* 「ご紹介！」 */
.features-conclusion {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
}

/* (3) Recommend: おすすめ */

/* (A) 見出し */
.recommend-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    background-color: #016736; /* 濃い緑 */
    text-align: center;
    padding: 1.5rem;
    margin-bottom: 3rem;
}

/* (B) チェックリスト */
.recommend-checklist {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; /* アイテムを中央揃え */
    gap: 2rem;
    margin-bottom: 3rem;
}

.recommend-item {
    background: #E4FFE4;
    border-radius: 1.5rem;
    padding: 2rem;
    padding-left: 6rem;
    position: relative;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.6;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    width: calc( (100% - 4rem) / 3 );
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* チェックマーク (SVG) */
.recommend-item::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%); /* 縦中央揃え */
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-image: url("../images/check02.svg");
    background-size: 2.5rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* (C) ターゲット */
.seminar-target {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    margin-top: 3rem;
}
.target-image {
    flex-basis: 30%;
    max-width: 22rem;
    flex-shrink: 0; /* 画像が縮まないように */
}
.target-image img {
    width: 100%;
}
.target-text {
    flex-basis: 70%;
    max-width: 60rem;
    font-size: 1.8rem; /* 基本の文字サイズ */
    font-weight: 500;
    line-height: 1.7;
    color: #333; /* 基本の文字色 */
}

.target-text p {
    margin-bottom: 1rem;
}

/* マーカーを引く行 */
.target-text .target-highlight {
    font-size: 2.4rem; 
    font-weight: 700;
    color: #005948; /* 濃い緑 */
    background: linear-gradient(transparent 60%, #ffde30 60%); /* 黄色のマーカー */
    display: inline; /* テキスト幅に合わせる */
    padding: 0.2rem 0; /* マーカーの上下の余白 */
    margin-bottom: 1rem;
}

/* 最後の説明文 */
.target-text .target-description {
    font-size: 1.6rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* (4) Cases & Industries: 事例と業種 */
#cases-block {
     padding-top: 6rem;
     padding-bottom: 6rem;
     margin-bottom: 0; /* .details-block のマージンをリセット */
}

/* (A) 事例 */
.cases-grid {
    display: flex;
    gap: 2rem;
    margin-bottom: 4rem;
}
.case-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-basis: 50%; /* 2列 */
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
}
.case-figure {
    text-align: center;
    flex-shrink: 0;
}
.case-figure img {
    height: 6rem;
    width: 8rem;
    object-fit: contain;
}
.case-figure .industry-tag {display: block;background: #016736;color: #fff;border-radius: 2rem;padding: 0 2.5rem;font-size: 1.65rem;font-weight: 700;margin-top: 1.5rem;box-sizing: border-box;}
.case-text {
    flex-grow: 1;
    border-left: 1px dashed #ccc;
    padding-left: 2rem;
}
.case-text .case-title {
    display: block;
    color: #016736;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.case-text .case-description {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
}

/* (B) 業種 */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}
.industry-item {
    text-align: center;
    position: relative;
}
.industry-icon {
    width: 10rem;
    height: 10rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    
    /* アイコンを円の上下左右中央に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.industry-icon img {
    height: 6rem;
    width: 6rem;
    object-fit: contain;
}
.industry-item .industry-name {
    display: inline-block;
    background: #016736;
    color: #fff;
    border-radius: 2rem;
    /* padding: 0 1rem; */
    font-size: 1.6rem;
    font-weight: 700;
    width: 80%; /* 幅を統一 */
    box-sizing: border-box;
    margin: auto;
    margin-top: -1.2rem;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
}
/* (5) Reform: 法改正 */
#reform-block {
    background: #FFFFBC;
    border: 0.6rem solid #016736;
    border-radius: 2rem;
    padding: 3rem 4rem;
    margin-bottom: 0; /* .details-block のマージンをリセット */
    margin-top: 4rem;
}

.reform-wrapper {
    display: flex;
    gap: 3rem;
}

.reform-title {
    font-size: 2rem;
    font-weight: 700;
    color: #016736;
    flex-basis: 15%;
    
    /* 縦書き風 (実際は幅固定で改行) */
     /* 縦書き */
     /* 上から下へ */
    text-align: center;
    line-height: 1.5; /* 1行の幅 */
    align-content: center;
}

.reform-list {
    list-style: none;
    flex-basis: 80%;
    flex-grow: 1;
}

.reform-list li {
    position: relative;
    padding-left: 3rem; /* アイコン分のスペース */
    display: flex;
    align-items: baseline; /* テキストのベースラインを揃える */
    gap: 1.5rem;
}

.reform-list li:not(:last-child) {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    /* 点線 */
    border-bottom: 2px dashed #cccccc;
}

/* リストの点 (緑丸) */
.reform-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem; /* 位置調整 */
    width: 1.8rem;
    height: 1.8rem;
    background-color: #8bc34a; /* 黄緑色 */
    border-radius: 50%;
}

.reform-list .year {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}

.reform-list p {
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
}

.reform-list p .highlight {
    font-weight: 900;
    color: #c72580; /* ピンク色 */
}

@media (max-width: 940px) {
  .about-item p {
        padding: 1.5rem;
        max-width: 85%;
    }
        /* (2) Features */
    #features-block{
        padding:0;
        margin-top: 7rem;
    }
    .features-content {
        flex-direction: column; /* 縦積み */
    }
    .features-text {
    padding: 7rem 2rem 3rem;
    width: calc(100% - 24%);
    }
    .features-image {
        text-align: center;
        margin-top: 2rem;
    }
    .features-image img {
        max-width: 550px;
    }
    .features-title {
        font-size: 2rem;
    }
    .features-title .highlight {
        font-size: 2.6rem;
    }
    .features-box {
        font-size: 2.5rem;
    }
}


/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {
    /* V字カットの調整 */
    #seminar-details {
        padding-top: 14rem; 
    }
    #seminar-details::before {
        height: 8rem; 
    }
    
   /* (1) About */
    .about-grid {
        flex-direction: column; /* 縦積み */
    }

    .about-item {
        width: 80%;
        margin: 3rem auto 0!important;
    }
    .about-item .about-highlight{
        font-size:1.75rem
    }
  
    
    .details-conclusion {
        font-size: 2rem; /* スマホ用に調整 */
        margin-top: 8rem;
    }



    /* (3) Recommend */
    .seminar-target {
        flex-direction: column; /* 縦積み */
        text-align: center;
        gap: 2rem;
    }
    .recommend-item{
        width: 100%;
    }
    .target-image {
        max-width: 18rem;
    }
    .target-text {
        font-size: 1.6rem;
    }
    .target-text .target-highlight {
        font-size: 2rem;
    }
    .target-text .target-description {
        font-size: 1.5rem;
        text-align: left; /* 説明文は左揃えに戻す */
    }

/* (4) Cases & Industries */
    #cases-block {
        padding-top: 0rem;
        padding-bottom: 2rem;
    }
    .cases-grid {
        flex-direction: column; /* 縦積み */
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    .case-item {
        flex-basis: 100%;
        flex-direction: column;
        gap: 1rem;
    }
    .case-text .case-description {
        font-size: 1.7rem;
    }
    .case-figure img {
        height: 5rem;
    }
    .case-text {
    flex-grow: 1;
    border-left: none;
    padding-left: 0rem;
    text-align:center;
    }
    .industry-grid {
        grid-template-columns: repeat(3, 1fr); /* 3列 */
        gap: 2.5rem 1.5rem;
    }
    .industry-icon {
        width: 8rem;
        height: 8rem;
    }
    .industry-icon img {
        height: 4.5rem;
    }
    .industry-item .industry-name {
        font-size: 1.4rem;
        padding: 0rem 0.5rem;
    }
    
    /* (5) Reform */
    #reform-block {
        padding: 2rem;
    }

    .reform-wrapper {
        flex-direction: column; /* 縦積みに */
        gap: 2rem;
    }

    .reform-title {
        /* 縦書きをリセット */
        text-align: left;
        font-size: 2rem;
        padding-left: 1.5rem;
        border-left: 0.5rem solid #016736;
        width: auto;
        margin-bottom: 2rem;
    }

    .reform-list li {
        padding-left: 2.5rem;
        flex-direction: column; /* 年と内容を縦積みに */
        gap: 0.5rem;
    }

    .reform-list li::before {
        width: 1.6rem;
        height: 1.6rem;
        top: 0.3rem;
    }

    .reform-list .year {
        font-size: 1.6rem;
    }

    .reform-list p {
        font-size: 1.6rem;
    }
    
    /* 中間CTA */
    #cta-middle .btn {
        max-width: 100%; /* スマホでは幅いっぱいに */
    }
}

/* ---
 5. 本セミナーで学べること (#learning-points)
--- */

#learning-points {
    background-color: #E6FFE7;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* 汎用：中央揃えの見出し */
.section-title-center {
    text-align: center;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 4rem;
}

/* 各カードアイテム */
.learning-item {
    background-color: #fff;
    padding: 4rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

/* カード間の余白 */
.learning-item:not(:last-child) {
    margin-bottom: 4rem;
}

/* (2) コンテンツ（リスト + 画像） */
.learning-content {
    display: flex;
    gap: 3rem;
    align-items: flex-start; /* 上揃え */
}

.learning-text {
    flex-basis: 65%;
}

.learning-image {
    flex-basis: 30%;
    text-align: center;
}
.learning-image img {
    width: 100%;
    max-width: 25rem;
    height: auto;
}

/* カードヘッダー (番号 + タイトル) */
.learning-header {
    display: flex;
    align-items: end;
    gap: 3rem;
    position: relative; /* 緑線の基準 */
    padding-bottom: 2.5rem; /* 緑線のためのスペース */
}

/* 緑色の短い線 */
.learning-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10%; /* 短い線 */
    height: 0.4rem; /* 太さ */
    background-color: #016736; /* 濃い緑 */
}

.learning-number {
    font-size: 4.5rem;
    font-weight: 900;
    color: #016736; /* 濃い緑 */
    line-height: 1;
}
.learning-title {
    font-size: 2.6rem;
    font-weight: 900;
    color: #016736; /* 黒に変更 */
}

/* 区切り線 (グレーの全幅線) */
.learning-divider {
    border: 0;
    height: 4px;
    background-color: #e0e0e0; /* 薄いグレー */
    margin: 0; /* 上下のマージンをリセット */
    margin-bottom: 3rem; /* 下のコンテンツとの余白 */
    margin-top: -4px;
}

/* 箇条書きリスト */
.learning-bullets {
    list-style: none;
    padding-left: 0;
}
.learning-bullets li {
    position: relative;
    padding-left: 3rem; /* ビュレット（点）のためのスペース */
    font-size: 1.7rem;
    color: #333;
    line-height: 1.7;
}
.learning-bullets li:not(:last-child) {
    margin-bottom: 2rem;
}
/* 箇条書きの点 */
.learning-bullets li::before {
    content: '●';
    position: absolute;
    left: 0;
    top: 0.3rem;
    font-size: 1rem; /* 少し大きく */
    color: #016736; /* 濃い緑 */
}
/* （項目02, 03で使用する可能性のある strong タグ） */
.learning-bullets li strong {
}


/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {
    .section-title-center {
        font-size: 2.4rem;
        margin-bottom: 3rem;
    }
    .learning-item{
      padding:3.2rem
    }
    .learning-item:not(:last-child) {
        margin-bottom: 3rem;
    }

    /* コンテンツを縦積みに */
    .learning-content {
        flex-direction: column;
    }

    .learning-text {
        width: 100%;
    }
    .learning-image {
        width: 100%;
        margin-top: 2rem; /* リストとの間に余白 */
    }
    .learning-image img {
        max-width: 25rem;
    }
    .learning-header {
        align-items: center;
        flex-direction: column;
    }
    .learning-header::after {
        display: none; /* スマホでは緑線を少し長く */
    }
    .learning-title {
        font-size: 2rem;
    }
    .learning-bullets li {
        font-size: 1.65rem;
    }
}

/* ---
 汎用：セクション見出し (Overview, Speakers)
--- */
.section-heading-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
    padding-top: 3rem; /* 英語見出しのスペース確保 */
}
.heading-en {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8rem;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    z-index: 1;
}
.heading-ja {
    position: relative;
    z-index: 2; /* 英語より手前 */
    font-size: 3rem;
    font-weight: 900;
}


/* ---
 6. セミナー概要 (#overview)
--- */
#overview {
    background: linear-gradient(360deg, #C2E7F5 0%, #e6ffe7 100%);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

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

.overview-row {
    display: flex;
}

.overview-label {
    background-color: #B7E3FF; /* 薄い水色 */
    color: #0d4a90;
    font-size: 1.75rem;
    font-weight: 700;
    padding: 2rem;
    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.7rem;
    padding: 3.2rem 2rem;
    flex-basis: 75%;
    line-height: 1.7;
    border-bottom: 1px solid #ccc;
}
.overview-data .f-large{
   font-size: 2.6rem;
    
}
.overview-data .note {
    display: block;
    font-size: 1.4rem;
    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;
}


/* ---
 7. 登壇者 (#speakers)
--- */
#speakers {
     background: linear-gradient(360deg, #A8D5FE 0%, #c2e7f5 100%);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

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

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

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

.speaker-name {
    font-size: 3.2rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 2rem;
}
.speaker-name span{
    font-size:2rem
}
.speaker-title {
    font-size: 1.6rem;
    font-weight: normal;
    color: #333;
    line-height: 1.6;
    margin-bottom: 2rem;
    border-bottom: 1px solid #42A763;
    padding-bottom: 4rem;
}

.speaker-bio {
    font-size: 1.5rem;
    color: #333;
    line-height: 1.8;
    font-weight: lighter;
    padding-top: 2rem;
}


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

    /* 概要 */
    .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;
    }

}
/* ---
 8. よくあるご質問 (#faq)
--- */

#faq {
    /* 土台CSSの #eaf6fc が適用されている想定 */
    /* seminar-details と同じグリッド背景を適用 */
    background-image: url('../images/grid-pattern02.png'); /* 2. パターン画像 */
    background-repeat: repeat;
    background-position: top left;
    background-size: 100px 46px;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.faq-list {
    max-width: 90rem; /* コンテンツ幅を少し狭く */
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 1rem;
    padding: 3rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
}
.faq-item:not(:last-child) {
    margin-bottom: 2.5rem;
}

.faq-q,
.faq-a {
    position: relative;
    padding-left: 4.5rem; /* Q/Aアイコンのスペース */
    font-size: 1.75rem;
    line-height: 1.7;
}

/* Q/Aアイコン共通スタイル */
.faq-q::before,
.faq-a::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: 900;
    
    /* アイコン内文字の上下左右中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Qアイコン */
.faq-q {
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem; /* Aとの余白 */
    border-bottom: 1px solid #ccc;
    padding-bottom: 2rem;
}
.faq-q::before {
    content: 'Q';
     /* 薄い水色 */
    color: #0d4a90;
}

/* Aアイコン */
.faq-a {
    color: #333;
}
.faq-a::before {
    content: 'A';
     /* 薄いオレンジ/黄 */
    color: #f57c00; /* オレンジ */
}


/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {
    .faq-item {
        padding: 2.5rem;
    }
    .faq-q,
    .faq-a {
        padding-left: 4rem;
        font-size: 1.5rem;
    }
    .faq-q::before,
    .faq-a::before {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.6rem;
    }
}

/* ---
 9. フッター (#footer)
--- */

#footer {
    padding-top: 0;
    padding-bottom: 0;
}

/* フッターのメインコンテンツエリア */
#footer .container {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* (A) 見出し */
/* .section-title-center は #learning-points で定義済み */

/* (B) ロゴ */
.footer-logo {
    text-align: center;
    margin-bottom: 3rem;
}
.footer-logo img {
    width: 100%;
    max-width: 30rem; /* ロゴのサイズに合わせて調整 */
    height: auto;
}

/* (C) 会社情報ボックス */
.footer-info-box {
    background: #F5F5F5; /* 薄いグレー */
    border-radius: 1rem;
    padding: 3rem;
    max-width: 80rem;
    margin: 0 auto; /* 中央寄せ */
}
.footer-info-row {
    display: flex;
    align-items: flex-start;
    font-size: 1.6rem;
}
.footer-info-row:not(:last-child) {
    margin-bottom: 1rem;
}

.footer-info-row .info-label {
    flex-basis: 15%;
    flex-shrink: 0;
    font-weight: 700;
    color: #333;
    position: relative;
    padding-left: 2rem; /* 緑の点の分 */
}
/* 緑の点 */
.footer-info-row .info-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem; /* 位置調整 */
    width: 1rem;
    height: 1rem;
    background: #005948; /* 濃い緑 */
    border-radius: 50%;
}

.footer-info-row .info-data {
    flex-basis: 85%;
    color: #333;
    line-height: 1.7;
    word-break: break-all;
}
.footer-info-row .info-data p {
    margin: 0;
    padding: 0;
}
.footer-info-row .info-data a {
    color: #0d4a90; /* リンク色 */
    text-decoration: underline;
}
.footer-info-row .info-data a:hover {
    text-decoration: none;
}

/* (D) 個人情報保護方針リンク */
.footer-privacy-link {
    text-align: center;
    margin-top: 3rem;
}
.footer-privacy-link a {
    font-size: 1.5rem;
    color: #333;
    text-decoration: underline;
}
.footer-privacy-link a:hover {
    text-decoration: none;
}

/* (E) フッター最下部バー */
.footer-bottom-bar {
    background: #093492; /* 濃い青 */
    padding: 2rem;
    text-align: center;
}
.footer-bottom-bar p {
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
}


    .sp_block{
        display: none;
    }
    
/* ---
 レスポンシブ (スマホ対応)
 画面幅が 768px 以下の場合
--- */
@media (max-width: 768px) {
    #footer .container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .footer-logo img {
        max-width: 25rem;
    }
    .footer-info-box {
        padding: 2.5rem;
    }
    .footer-info-row {
        flex-direction: column; /* 縦積み */
    }
    .footer-info-row .info-label {
        margin-bottom: 0.5rem;
    }
    .footer-info-row .info-label::before {
        top: 0.8rem;
    }
    
    .footer-privacy-link a {
        font-size: 1.4rem;
    }

    .footer-bottom-bar p {
        font-size: 1.2rem;
    }
    

    .sp_block{
        display: block;
    }
    
}