/* ------------ 給付金はご存じですか？ ------------ */

.kf-banner-container {
text-align: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

.kf-main-text {
font-size: 36px;
font-weight: bold;
color: #333;
align-items: center;
justify-content: center;
gap: 5px;
}

.kf-title{font-size: 40px;}

.kf-highlight-red {
color: #bc759e;
}

.kf-large-number {
font-size: 100px;
color: #bc759e;
line-height: 1;
}

.kf-percent-symbol {
font-size: 60px;
color: #bc759e;
}

.img-cashback{max-width: 900px;margin: 0 auto;}

.gkan1{
font-size: 12px;
margin-bottom: 30px;
}

@media (max-width: 640px) {
    .kf-banner-container {
        width: 95%;
        margin: 0 auto;
    }

    .kf-title{font-size: 24px;}

    .gkan1{
        font-size: 12px;
        margin-bottom: 20px;
    }

    .gkan2{
        font-size: 12px;
        margin-bottom: 40px;
    }
}

/* ------------　コースメニュー ------------ */
.sc-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px 10px 0 10px;
}

.sc-schedmenu {
      text-align: center;
      margin-bottom: 20px;
 }

.sc-title {
      font-size: 32px;
      font-weight: 900;
      color: #000;
      letter-spacing: -0.025em;
      margin-bottom: 16px;
}

.sc-description {
      margin: 0 auto;
      font-size: 16px;
      line-height: 160%;
}

.sched-wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 0px;
}

.sched-btn {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      color: #222;
      padding: 10px 20px;
      border-radius: 9999px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
}

.sched-btn:hover {
      border-color: #529acc;
      color: #529acc;
      background-color: #eff6ff;
}

    /* Responsive adjustments */
    @media (max-width: 640px) {
    .sc-container {
      margin-bottom: 20px;
      padding: 30px 10px 0 10px;
    }
      .sc-title {
        font-size: 20px;
        line-height: 130%;
      }
      .sc-description {
        text-align: left;
        font-size: 14px;
        line-height: 130%;
      }
      .course-grid {
        grid-template-columns: 1fr;
      }
      .sched-btn {
        padding: 8px 14px;
        font-size: 14px;
      }
    }


/* ------------ 説明会ボタン ------------ */

.btn_book {
display: inline-block;
/* animation: bounce 1s infinite; */
}

@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
   
/* ------------ コース紹介 ------------ */


    /* 複数バナーを並べるラッパーコンテナ（PCでは横並び、SPでは縦並び） */
    .banners-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch; /* バナーの高さを揃える */
      gap: 10px;
      width: 100%;
      max-width: 1140px; /* 540px * 2 + 30px gap */
      margin: 0 auto;
    }

    /* バナー全体のコンテナ */
    .banner-container {
      flex: 1;
      width: 100%;
      background-color: #ffffff;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .banner-container1 {
      flex: 1;
      width: 100%;
      max-width: 100%;
      background-color: #ffffff;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }


    /* キャッチコピー（最上部サブ） */
    .catchphrase-sub {
      color: #333333;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      text-align: left;
      width: 100%;
      padding-left: 2px;
    }

    /* キャッチコピー（上部） */
    .catchphrase-top {
      color: #0d3c75;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin: 0 0 4px 0;
      line-height: 1.3;
      text-align: left;
      width: 100%;
    }

    /* キャッチコピー（下部） */
    .catchphrase-bottom {
      color: #bc759e;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.5px;
      margin: 0 0 12px 0;
      line-height: 1.3;
      text-align: left;
      width: 100%;
    }

    /* キャッチコピー強調（ゴールド） */
    .highlight-gold {
    /*  color: #d69e2e; */
      color: #529acc;
    }

    /* メインカード */
    .main-card {
      position: relative;
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
      padding: 30px 20px 24px 20px;
      /* 横並び時に高さを揃えた上でコンテンツを等間隔に配置するためFlex構造化 */
      display: flex;
      flex-direction: column;
      flex-grow: 1; 
    }

    /* 右上の水色の丸バッジ */
    .badge-exam {
      position: absolute;
      top: -30px;
      right: -10px;
      width: 84px;
      height: 84px;
      background-color: #529acc;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-weight: 700;
      font-size: 11px;
      line-height: 1.3;
      box-shadow: 0 4px 10px rgba(91, 194, 231, 0.3);
      z-index: 10;
    }

     .badge-exam .year {
      font-size: 12px;
    }

    .badge-exam .month {
      font-size: 15px;
      font-weight: 800;
    }

    /* コースタイトル */
    .course-title {
      font-size: 22px;
      font-weight: 800;
      color: #222;
      text-align: left;
      padding-bottom: 12px;
      border-bottom: 1px dashed #cbd5e0;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    /* コース詳細（テーブル構造） */
    .course-details {
      width: 100%;
      margin-bottom: 18px;
    }

    .detail-row {
      display: flex;
    /*   align-items: center; */
      align-items: flex-start;
      margin-bottom: 10px;
    }

    .detail-label {
      background-color: #f0f0f0;
      color: #333333;
      font-size: 12px;
      font-weight: 500;
      padding: 4px 10px;
      border-radius: 2px;
      width: 60px;
      text-align: center;
      margin-right: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .detail-content {
      font-size: 18px;
      font-weight: 500;
      line-height: 120%;
      color: #222;
      text-align: left;
    }

    /* 区切り線 */
    .divider {
      border-top: 1px solid #cbd5e0;
      margin-bottom: 16px;
    }


    /* 申込期限 */
    .kigen {
      background-color: #d1f0ff;
      padding: 6px 6px;    
      margin-bottom: 4px;
      text-align: left;
      
    }

    .kigen-label {
      font-size: 14px;
      font-weight: 600;
    }

    .kigen-text {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.5px;
    }


    /* 黄色背景の特典帯 */
    .bonus-banner {
      margin-bottom: 22px;
      border-radius: 2px;
      text-align: center;
    }

    .bonus-text {
      color: #ef4f88;
      font-size: 19.5px;
      font-weight: 900;
      letter-spacing: -0.5px;
      display: inline-block;
    }

    /* 特典詳細リストエリア（バナー1用・新画像対応） */
    .benefits-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 0PX; /* 高さを揃えて下部に固定 */
      margin-bottom: auto;
      text-align: left;
      width: 100%;
      padding: 0 6px;
    }

    .benefit-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .benefit-badge {
      background-color: #93006d; /* 赤紫 */
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      padding: 3px 10px;
      border-radius: 2px;
      white-space: nowrap;
      min-width: 54px;
      text-align: center;
    }

    .benefit-text {
      color: #222;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.3;
    }

    .benefit-highlight {
      color: #93006d; /* 赤紫 */
      font-weight: 900;
    }

    /* 実質負担額エリア（バナー2用） */
    .price-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0; /* 高さを揃えて下部に固定 */
      margin-bottom: auto;
    }

    .price-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 4px;
    }

    .price-label {
      background-color: #bc759e; /* ボルドー・マゼンタ */
      color: #ffffff;
      font-size: 13px;
      font-weight: 900;
      padding: 3px 8px;
      border-radius: 2px;
      white-space: nowrap;
    }

    .price-amount {
      color: #bc759e;
      font-size: 38px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.5px;
    }

    .price-amount span {
      font-size: 22px;
      letter-spacing: normal;
    }

    .price-footnote {
      color: #333333;
      font-size: 11px;
      font-weight: 500;
      padding: 8px 0 20px 0 ;
    }

     /* 説明文 */

    .text_ex{
      line-height: 150%;
      font-size: 14px;
    }

    /* ボタンエリア */
    .button-group {
      display: flex;
      gap: 12px;
      width: 100%;
    }

    /* 共通ボタン基本設定 */
    .btn {
      flex: 1;
      height: 52px;
      border-radius: 26px;
      border: none;
      font-size: 14px;
      font-weight: 900;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    /* スケジュールを見る ボタン */
    .btn-schedule {
      background: linear-gradient(135deg, #3ac5be, #19a49f);
    }

    /* 説明会申し込みコンテナ */
    .btn-apply-container {
      position: relative;
      flex: 1;
    }

    /* 参加無料ミニバッジ */
    .badge-free {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ffffff;
      color: #f97316;
      border: 1px solid #f97316;
      font-size: 10px;
      font-weight: 900;
      padding: 3px 10px;
      border-radius: 3px;
      white-space: nowrap;
      z-index: 5;
    }

    /* オンライン説明会に申し込む ボタン */
    .btn-apply {
      background: linear-gradient(90deg, #f59e0b, #ea580c);
      width: 100%;
    }

    /* CSSロールオーバー */
    .btn:hover {
      transform: translateY(-2px); /* 少し上に浮き上がる */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 影を深くして立体感をアップ */
      filter: brightness(1.05); /* ボタンを少し明るく */
    }

    .btn:active {
      transform: translateY(1px); /* クリック時に押し込まれる */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を浅くする */
      filter: brightness(0.95); /* 少し暗くして押し込み感を強調 */
    }

    /* ==========================================
       ★ レスポンシブ用ブレイクポイント ★
    ========================================== */
    /* タブレット・スマートフォンサイズ（横幅が1100px未満）になったら縦並びにする */
    @media (max-width: 1100px) {

      .banners-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 40px; /* 縦並び時のバナー間の余白 */
      }
      .banner-container {
        max-width: 100%; /* 縦2列（スマホ等）のときは横幅いっぱいに広げる */
      }

      .button-group {
        margin-top: 30px;
      }
    }

    /* 極小画面モバイル対応 */
    @media (max-width: 480px) {
      .catchphrase-sub {
        font-size: 12px;
      }
      .catchphrase-top {
        font-size: 20px;
      }
      .catchphrase-bottom {
        font-size: 19px;
      }
      .main-card {
        padding: 26px 15px 20px 15px;
      }
      .badge-exam {
        width: 74px;
        height: 74px;
        top: -26px;
        right: -6px;
      }
      .badge-exam .month {
        font-size: 13px;
      }
      .course-title {
        font-size: 18px;
      }
      .detail-content {
        font-size: 15px;
      }
      .benefit-text {
        font-size: 14px;
      }
      .benefit-badge {
        font-size: 10px;
        min-width: 46px;
        padding: 2px 6px;
      }
      .price-amount {
        font-size: 32px;
      }
      .price-amount span {
        font-size: 18px;
      }
      .price-footnote {
        font-size: 10px;
      }
      .btn {
        font-size: 12px;
        height: 48px;
        line-height: 110%;
        font-weight: 800;
      }

      .badge-free {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ffffff;
      color: #f97316;
      border: 1px solid #f97316;
      font-size: 10px;
      font-weight: 900;
      padding: 3px 10px;
      border-radius: 3px;
      white-space: nowrap;
      z-index: 5;
      }

 
    }




/* ------------　活躍できるシーン・職場 ------------ */

        /* -------------------------------------------------------------
         * 全体変数と共通デザインシステムの定義
         * ------------------------------------------------------------- */
        :root {
            --font-sans: 'Noto Sans JP', sans-serif;
            --bg-body: #f9fafb;
            --text-main: #1f2937;
            --text-muted: #4b5563;
            --border-color: #e5e7eb;
            
            /* メインテーマカラー */
            --brand-50: #f0f7ff;
            --brand-100: #e0effe;
            --brand-600: #bc759e;
            --brand-700: #bc759e;
            --orange-500: #f97316;
            --orange-600: #ea580c;

            /* シーン別のアイデンティティカラー */
            --color-blue-bg: #eff6ff;
            --color-blue-text: #529acc;

        }


        .hero-text {
            color: #222;
            text-align: left;
            width: 90%;
            margin: 0 auto;
            font-size: 14px;
            line-height: 160%;
        }
        @media (min-width: 640px) {
            .hero-text {
                text-align: center;
                max-width: 1200px;
                font-size: 16px;
            }
        }

        /* -------------------------------------------------------------
         * 活躍シーン紹介（グリッドレイアウト・カード）
         * ------------------------------------------------------------- */
        .scenes-section {
            padding: 30px 0 ;
            background-color: #ffffff;
        }

        .scenes-container {
            width: 90%;
            margin: 0 auto;
        }

        .grid-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

          @media (min-width: 640px) {
            .scenes-container {
            max-width: 1200px;
            margin: 0 auto;
        }
            .grid-layout {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        .scene-card {
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 1.25rem;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }


        .icon-container {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease;
        }

        .scene-no {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .card-title {
            font-size: 22px;
            font-weight: 700;
            line-height: 120%;
            color: #111827;
            margin-top: 0.5rem;
            margin-bottom: 1rem;
            transition: color 0.3s ease;
        }

        .card-desc {
            color: var(--text-muted);
            font-size: 0.875rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

        .card-footer {
            border-top: 1px solid #f3f4f6;
            padding-top: 1rem;
            margin-top: auto;
        }

        .tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            background-color: #f3f4f6;
            color: #4b5563;
            font-size: 0.75rem;
            font-weight: 500;
            padding: 0.25rem 0.65rem;
            border-radius: 0.375rem;
        }

        /* シーンカード別固有スタイル設定 */
        .scene--01 .icon-container { background-color: var(--color-blue-bg); color: var(--color-blue-text); }
        .scene--01 .scene-no { color: var(--color-blue-text); }

        .scene--02 .icon-container { background-color: var(--color-blue-bg); color: var(--color-blue-text); }
        .scene--02 .scene-no { color: var(--color-blue-text); }

        .scene--03 .icon-container { background-color: var(--color-blue-bg); color: var(--color-blue-text); }
        .scene--03 .scene-no { color: var(--color-blue-text); }

        .scene--04 .icon-container { background-color: var(--color-blue-bg); color: var(--color-blue-text); }
        .scene--04 .scene-no { color: var(--color-blue-text); }

        .scene--05 .icon-container { background-color: var(--color-blue-bg); color: var(--color-blue-text); }
        .scene--05 .scene-no { color: var(--color-blue-text); }

        .scene--06 .icon-container { background-color: var(--color-blue-bg); color: var(--color-blue-text); }
        .scene--06 .scene-no { color: var(--color-blue-text); }

        /* -------------------------------------------------------------
         * コンバージョンアクションエリア
         * ------------------------------------------------------------- */
        .action-area {
            margin-top: 40px;
            background-color: var(--brand-50);
            border: 1px solid var(--brand-100);
            border-radius: 1.5rem;
            padding: 2.5rem 1.5rem;
            text-align: center;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        @media (min-width: 640px) {
            .action-area {
                max-width: 1000px;
                padding: 3rem 4rem;
            }
        }

        .action-title {
            font-size: 20px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.75rem;
            line-height: 130%;
            text-align: left;
        }

        @media (min-width: 768px) {
            .action-title {
                font-size: 26px;
                text-align: center;
            }
        }

        .action-desc {
            color: var(--text-muted);
            font-size: 14px;
            line-height: 170%;
            max-width: 580px;
            margin: 0 auto 2.5rem;
            text-align: left;
        }

        @media (min-width: 768px) {
            .action-desc {
                font-size: 16px;
                text-align: center;
            }
        }

        .btn1-group {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
        }

        @media (min-width: 640px) {
            .btn1-group {
                flex-direction: row;
            }
        }

        .btn1 {
            display: inline-block;
            font-size: 1rem;
            font-weight: 700;
            padding: 1rem 2rem;
            border-radius: 9999px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            text-align: center;
            line-height: 130%;
        }

        .btn1:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        .btn1-primary {
            background: linear-gradient(90deg, #bc759e, #ce87b0);
            color: #ffffff;
        }

        .btn1-primary:hover {
            background-color: var(--brand-700);
        }

        .btn1-orange {
            background: linear-gradient(90deg, #f59e0b, #ea580c);
            color: #ffffff;
        }

        .btn1-orange:hover {
            background-color: var(--orange-600);
        }



/* ------------ 比較 ------------ */
        :root {
            --brand-pink: #bc759e;
            --brand-pink-dark: #9a4e7a;
            --brand-pink-light: #fdf2f7;
            --brand-pink-border: #f3d0e2;
            --brand-navy: #0F172A;
            --slate-900: #0f172a;
            --slate-800: #1e293b;
            --slate-700: #334155;
            --slate-600: #475569;
            --slate-500: #64748b;
            --slate-200: #e2e8f0;
            --slate-100: #f1f5f9;
            --slate-50: #f8fafc;
            --gold: #f59e0b;
            --gold-dark: #d97706;
            --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
            --shadow-highlight: 0 10px 25px -5px rgba(188, 117, 158, 0.25), 0 8px 10px -6px rgba(188, 117, 158, 0.2);
        }

@media (max-width: 640px) {
            .hikaku-area {
                width:90%;
                margin: 0 auto;
            }
        }
        .hikaku-container {
            max-width: 1200px;
            margin: 40px auto;
        }

        .header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .header-title {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--slate-900);
            letter-spacing: -0.025em;
            line-height: 1.25;
            margin-bottom: 0.75rem;
        }

        @media (min-width: 640px) {
            .header-title {
                font-size: 2.25rem;
            }
        }

        .header-title-highlight {
            color: var(--brand-pink);
        }

        .header-desc {
            color: var(--slate-600);
            font-size: 18px;
            margin: 20px auto;
            text-align: center;
        }

        @media (min-width: 640px) {
            .header-desc {
                font-size: 1rem;
            }
        }

        .info-banner {
            background-color: #ffffff;
            border-radius: 1rem;
            padding: 1rem 1.25rem;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--slate-200);
            margin: 0 auto 2rem auto;
            max-width: 56rem;
        }

        .info-banner-inner {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .info-banner-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.75rem;
            background-color: var(--brand-pink-light);
            color: var(--brand-pink);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .info-banner-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--slate-800);
        }

        .info-banner-sub {
            font-size: 0.75rem;
            color: var(--slate-500);
        }

        .svg-icon {
            display: inline-block;
            vertical-align: middle;
            fill: currentColor;
        }

        .table-wrapper {
            display: none;
            overflow-x: auto;
            border-radius: 1rem;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--slate-200);
            background-color: #ffffff;
        }

        @media (min-width: 768px) {
            .table-wrapper {
                display: block;
            }
        }

        .comp-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            min-width: 900px;
        }

        .comp-table th, .comp-table td {
            padding: 1rem;
            font-size: 0.875rem;
        }

        .comp-table thead tr {
            border-bottom: 1px solid var(--slate-200);
        }

        .comp-table tbody tr {
            border-bottom: 1px solid var(--slate-200);
        }

        .comp-table tbody tr:last-child {
            border-bottom: none;
        }

        .th-item {
            background-color: var(--slate-50);
            color: var(--slate-700);
            font-weight: 700;
            width: 15%;
            position: sticky;
            left: 0;
            z-index: 20;
            box-shadow: 2px 0 5px -2px rgba(0,0,0,0.05);
        }

        .td-item {
            background-color: var(--slate-50);
            font-weight: 700;
            color: var(--slate-800);
            position: sticky;
            left: 0;
            z-index: 10;
            box-shadow: 2px 0 5px -2px rgba(0,0,0,0.05);
        }

        .col-featured {
            background-color: var(--brand-pink-light);
            text-align: center;
            position: relative;
            width: 28%;
            border-left: 2px solid var(--brand-pink);
            border-right: 2px solid var(--brand-pink);
            box-shadow: var(--shadow-highlight);
        }

        .col-standard {
            background-color: var(--slate-50);
            text-align: center;
            width: 19%;
            border-right: 1px solid var(--slate-200);
        }

        .col-standard:last-child {
            border-right: none;
        }

        .featured-crown-badge {
            position: absolute;
            top: -0.75rem;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #bc759e 0%, #9a4e7a 100%);
            color: #ffffff;
            font-size: 0.6875rem;
            font-weight: 900;
            padding: 0.125rem 0.75rem;
            border-radius: 9999px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .featured-sub {
            font-size: 0.75rem;
            color: var(--brand-pink-dark);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .featured-title {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--slate-900);
            line-height: 1.2;
            margin: 0.25rem 0;
        }

        .featured-tag {
            display: inline-block;
            background-color: var(--brand-pink);
            color: #ffffff;
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 0.125rem 0.625rem;
            border-radius: 9999px;
        }

        .standard-sub {
            font-size: 0.75rem;
            color: var(--slate-500);
            font-weight: 700;
        }

        .standard-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--slate-800);
        }

        .price-large {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--brand-pink-dark);
        }

        .price-unit {
            font-size: 0.875rem;
            font-weight: 700;
        }

        .badge-cheap {
            display: inline-block;
            background-color: var(--brand-pink-light);
            color: var(--brand-pink-dark);
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 0.125rem 0.5rem;
            border-radius: 0.25rem;
            margin-top: 0.25rem;
            border: 1px solid var(--brand-pink-border);
        }

        .mobile-container {
            display: block;
            margin-bottom: 2.5rem;
        }

        @media (min-width: 768px) {
            .mobile-container {
                display: none;
            }
        }

        .mobile-card-featured {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: var(--shadow-highlight);
            border: 2px solid var(--brand-pink);
            overflow: hidden;
            position: relative;
            margin-bottom: 1.5rem;
        }

        .mobile-badge-header {
            background: linear-gradient(135deg, #bc759e 0%, #9a4e7a 100%);
            color: #ffffff;
            text-align: center;
            padding: 0.5rem;
            font-size: 0.75rem;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
        }

        .mobile-card-body {
            padding: 1.25rem;
        }

        .mobile-card-header {
            text-align: center;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--slate-200);
            margin-bottom: 1rem;
        }

        .dl-list {
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
            font-size: 0.875rem;
        }

        .dl-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--slate-100);
        }

        .dl-row-align-start {
            align-items: flex-start;
        }

        .dl-dt {
            font-weight: 700;
            color: var(--slate-600);
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .dl-dd {
            text-align: right;
        }

        .competitor-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--slate-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            text-align: center;
            margin-bottom: 1rem;
        }

        .competitor-card {
            background-color: #ffffff;
            padding: 1rem;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid var(--slate-200);
            margin-bottom: 1rem;
        }

        .competitor-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--slate-100);
            font-weight: 700;
        }

        .competitor-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--slate-600);
        }






/* ------------ よくある質問 ------------ */


.main_faq {
            flex: 1;
            max-width: 960px;
            width: 100%;
            margin: 0 auto;
            padding: 2rem 1.5rem 3rem 1.5rem;
        }


        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .faq-item {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.25s ease;
        }

        .faq-item:hover {
            border-color: #cbd5e1;
        }

        .faq-toggle {
            width: 100%;
            text-align: left;
            padding: 1.25rem 1.5rem;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            font-family: inherit;
        }

        .faq-question-wrap {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
        }

        .badge-q {
            width: 26px;
            height: 26px;
            border-radius: 50px;
            background-color: #eef2ff;
            color: #628bae;
            font-weight: 800;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .faq-question {
            font-weight: 700;
            color: #1e293b;
            line-height: 1.4;
            padding-top: 0.15rem;
            font-size: 16px;
        }

        .faq-arrow {
            width: 20px;
            height: 20px;
            fill: #64748b;
            flex-shrink: 0;
            margin-top: 0.25rem;
            transition: transform 0.3s ease;
        }

        .faq-answer-wrap {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out, padding 0.3s ease;
            opacity: 0;
            padding: 0 1.5rem;
        }

        .faq-item.active .faq-answer-wrap {
            max-height: 2000px;
            opacity: 1;
            padding: 0 1.5rem 1.5rem 1.5rem;
        }

        .faq-item.active .faq-arrow {
            transform: rotate(180deg);
        }

        .faq-answer-inner {
            border-top: 1px solid #e2e8f0;
            padding-top: 1.25rem;
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
        }

        .badge-a {
            width: 26px;
            height: 26px;
            border-radius: 50px;
            background-color: #fff3f7;
            color: #c486a8;
            font-weight: 800;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .faq-content {
            font-size: 0.925rem;
            color: #334155;
            line-height: 1.7;
            padding-top: 0.15rem;
            width: 100%;
        }

        .faq-content p {
            margin-bottom: 0.75rem;
            font-size: 15px;
        }

        .faq-content p:last-child {
            margin-bottom: 0;
        }



/* ------------ カウントダウン ------------ */

        /* カウントダウン表示カード */
        .countdown-card {
            width: 1200px;
            background: #fff;
            border-radius: 10px;
            padding: 0px 20px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }


        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* メインの日数デカ文字 */
        .days-container {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 8px;
            margin: 6px 0 0px;
        }

        .label-prefix {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }

        .days-number {
            font-size: 52px;
            font-weight: 900;
            line-height: 1;
            color: #ffff00;
            font-feature-settings: "tnum";
            font-variant-numeric: tabular-nums;
            transition: color 0.3s ease;
        }

        .label-suffix {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }

        /* 「本日まで」および終了時メッセージ用 */
        .status-today {
            font-size: 20px;
            font-weight: 900;
            color: #ffff00;
            animation: pulse 1.5s infinite;
        }

        .status-closed {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
        }

        .deadline-date-info {
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }

        @media (max-width: 640px) {
            .countdown-card {
                padding: 0px 14px;
            }
            .days-number {
                font-size: 3.5rem;
            }
            .label-prefix, .label-suffix {
                font-size: 1.25rem;
            }
        }


/* ------------ モーダルウィンドウ ------------ */

        /* -----------------------------------
           モーダル（ポップアップ）スタイル 
        ----------------------------------- */
        
        /* 背景の暗転（オーバーレイ） */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            backdrop-filter: blur(3px); /* 背景ぼかし効果 */
        }

        /* モーダル表示時のアクティブ状態 */
        .modal-overlay.is-active {
            opacity: 1;
            visibility: visible;
        }

        /* モーダル本体のウィンドウ */
        .modal-window {
            background-color: #ffffff;
            width: 90%;
            max-width: 500px;
            border-radius: 16px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            transform: translateY(20px);
            transition: transform 0.3s ease;
            position: relative;
        }

        .modal-overlay.is-active .modal-window {
            transform: translateY(0);
        }

        /* モーダルヘッダー */
        .modal-header {
            padding: 20px 24px;
            background-color: #ffffff;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
        }

        /* 右上の×ボタン */
        .close-icon-btn {
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: #94a3b8;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s, color 0.2s;
        }

        .close-icon-btn:hover {
            background-color: #f1f5f9;
            color: #475569;
        }

        /* モーダル本文 */
        .modal-body {
            padding: 24px;
            color: #334155;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .modal-body p {
            margin-bottom: 12px;
        }

        .modal-body p:last-child {
            margin-bottom: 0;
        }

        .highlight-box {
            background-color: #f0f0f0;
            border-left: 4px solid #7de1ff;
            padding: 12px 16px;
            border-radius: 0 8px 8px 0;
            margin: 16px 0;
            color: #000;
        }

        /* モーダルフッター（アクションエリア） */
        .modal-footer {
            padding: 16px 24px 20px;
            background-color: #f8fafc;
            border-top: 1px solid #f1f5f9;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        /* 閉じるボタン */
        .btn-close {
            padding: 8px 20px;
            background-color: #e2e8f0;
            color: #475569;
            border: none;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .btn-close:hover {
            background-color: #cbd5e1;
        }

        /* 詳細リンクボタン */
        .btn-primary {
            padding: 8px 20px;
            background-color: #bc759e;
            color: #ffffff;
            border: none;
            border-radius: 20px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.2s;
        }

        .btn-primary:hover {
            background-color: #eba9cf;
        }