:root {
            --primary-color: #fca311;
            --secondary-color: #14213d;
            --bg-color: #f8f9fa;
            --text-color: #333333;
        }
        body {
            font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            line-height: 1.6;
        }
/* ヘッダー全体のレイアウト（Flexboxで左右に配置） */
header {
    background-color: #ffffff;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between; /* 左右に要素を振り分ける */
    align-items: center; /* 縦の中央揃え */
    flex-wrap: wrap; /* 画面が狭いときに折り返す用 */
}

/* ヘッダー左側（タイトルとロゴ） */
.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-left h1 {
    font-size: 0.8em;
    color: #666666;
    margin: 0 0 5px 0; /* ロゴとの隙間 */
    font-weight: normal;
}

.header-left img {
    max-width: 200px;
    height: auto;
}

/* ヘッダー右側（ボタン群） */
.header-right {
    display: flex;
    gap: 10px; /* ボタン間の隙間 */
}

/* ヘッダーボタンの共通スタイル */
.header-btn {
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    transition: opacity 0.2s;
    white-space: nowrap; /* ボタン内の文字の折り返しを防ぐ */
}

.header-btn:hover {
    opacity: 0.8;
}

/* 会員ログインボタン（白背景・線あり） */
.login-btn {
    background-color: #ffffff;
    color: var(--secondary-color, #14213d);
    border: 1px solid var(--secondary-color, #14213d);
}

/* 法人向けプランボタン（ベタ塗り） */
.corp-btn {
    background-color: var(--secondary-color, #14213d);
    color: #ffffff;
    border: 1px solid var(--secondary-color, #14213d);
}

/* メインビジュアルのコンテナ */
.hero {
    position: relative;
    text-align: center;
    color: #ffffff;
    width: 100%;
    overflow: hidden; /* 画面外への突き抜け（横揺れ・はみ出し）を防止 */
}

/* メイン画像 */
.hero img {
    width: 100%;
    max-width: 100%; /* 画面幅を絶対に超えないようにする */
    height: auto;
    max-height: 100vh; 
    object-fit: cover; 
    display: block; 
    filter: brightness(1.0);
}

        .hero-content {
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translate(-50%, -50%);
            width: 40%;
            background: rgba(255, 255, 255, 0.85);
            padding: 30px;
            border-radius: 10px;
            color: var(--secondary-color);
        }
        .hero-content h2 {
            color: var(--primary-color);
            font-size: 4em;
            margin-bottom: 10px;
        }
        .hero-content p {
            font-size: 1.6em;
            font-weight: bold;
        }
        .cta-button {
            display: inline-block;
            background-color: #e63946;
            color: white;
            padding: 15px 60px;
            font-size: 1.2em;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            margin-top: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            transition: transform 0.2s;
        }
        .cta-button:hover {
            transform: translateY(-2px);
        }
        .section {
            padding: 50px 20px;
            max-width: 900px;
            margin: 0 auto;
        }
        h1 {
            font-size: 0.8em;
        }
        h2 {
            font-size: 3em;
            text-align: center;
            color: var(--secondary-color);
            padding-bottom: 10px;
            margin-bottom: 30px;
        }
        .problem-list {
            background: #ffffff;
            padding: 40px 40px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .problem-list li {
            margin-left: 10px;
            font-size: 1.4em;
            list-style-type: "✓ ";
            color: #d62828;
        }
        .problem-list li span {
            color: var(--text-color);
        }

        /* 解決策セクションの2列グリッドレイアウト */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.feature-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    border-top: 5px solid var(--primary-color, #fca311);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* サムネイル画像のスタイル */
.feature-thumbnail {
    width: 100%;
    height: 200px; 
    object-fit: cover; 
    border-radius: 8px;
    margin-bottom: 20px;
}

.features h3 {
    color: var(--secondary-color);
    margin-top: 0;
}

/* ステップのコンテナを横1列・フレックスボックスにする */
.steps {
    display: flex;
    flex-wrap: nowrap; 
    gap: 15px; 
    justify-content: space-between;
    align-items: stretch; 
    overflow-x: auto; 
    padding-bottom: 10px; 
}

/* 各ステップのボックスデザイン */
.step {
    background: #ffffff;
    flex: 1; 
    min-width: 120px; 
    padding: 15px 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
    font-size: 0.9em;
    position: relative; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ステップ番号のスタイル */
.step-num {
    display: block;
    color: var(--primary-color, #fca311);
    font-size: 1.3em;
    margin-bottom: 8px;
}

/* ステップ間の矢印（最後のステップ以外に配置） */
.step:not(:last-child)::after {
    content: "▶";
    position: absolute;
    right: -15px; 
    top: 50%;
    transform: translateY(-50%);
    color: #cccccc;
    font-size: 1.2em;
    z-index: 1;
}

.pricing-lead {
    text-align: center;
    font-weight: bold;
    color: #d62828;
    margin-bottom: 20px;
}

/* テーブル全体の基本スタイル */
table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
th, td {
    border: 1px solid #999;
    padding: 15px;
    text-align: center;
}
th {
    background-color: var(--secondary-color);
    color: #ffffff;
}
.highlight {
    background-color: #ffdccd;
    font-weight: bold;
}

.faq-item {
    font-size: 1.2em;
    margin-bottom: 20px;
    background: #ffffff;
    padding:30px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.faq-q {
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 10px;
}
.faq-q::before {
    content: "Q. ";
    color: var(--primary-color);
}
.faq-a::before {
    content: "A. ";
    color: #d62828;
    font-weight: bold;
}
footer {
    background-color: var(--secondary-color);
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
}
footer a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
}
footer a:hover {
    text-decoration: underline;
}

/* ==========================================
   横幅798px以下のレスポンシブ調整・UI改善
   ========================================== */
@media (max-width: 798px) {
    /* ヘッダーの調整 */
    header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .header-left {
        align-items: center;
    }
    .header-right {
        justify-content: center;
        width: 100%;
    }

    /* 見出し（h2）の文字サイズと揃えの調整 */
    h2 {
        font-size: 1.8em;
        text-align: center;
        padding: 0 10px;
        line-height: 1.4;
    }

    /* ファーストビュー・ヒーローエリアの調整 */
    .hero {
        display: flex;
        flex-direction: column;
    }
    .hero img {
        max-height: 300px; 
        filter: brightness(1); 
    }
    .hero-content {
        position: static; 
        transform: none;  
        width: 100%;
        box-sizing: border-box;
        background-color: #ffffff; 
        border-radius: 0; 
        padding: 30px 20px;
        text-align: center;
    }
    .hero-content h2 {
        font-size: 2.2em;
    }
    .hero-content p {
        font-size: 1.2em;
    }

    /* 悩みのリストの文字サイズ調整 */
    .problem-list li {
        font-size: 1.1em;
    }

    /* 解決策の2列グリッドを1列に変更 */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .feature-thumbnail {
        height: 160px; 
    }

    /* ステップのフローを2列に変更、矢印を非表示 */
    .steps {
        flex-wrap: wrap; 
        overflow-x: visible;
        gap: 15px; 
    }
    .step {
        min-width: calc(50% - 15px); 
    }
    .step:not(:last-child)::after {
        display: none; 
    }

    /* テーブルの分割（block化）を解除し、横スクロールに対応 */
    div[style*="overflow-x:auto"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロール */
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        margin: 0 -10px; /* スマホ画面の端まで広げて視認性をアップ */
        padding: 0 10px 10px 10px;
    }

    /* テーブル本来の横長構造をしっかり保持 */
    table {
        display: table !important;
        width: 100% !important;
        min-width: 620px; /* 文字が潰れないよう最小幅を固定 */
        border-collapse: collapse;
        background: #ffffff;
    }

    /* 行と列の崩れを防止 */
    tr {
        display: table-row !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
    }

    th, td {
        display: table-cell !important;
        padding: 12px 10px !important;
        font-size: 0.85em !important;
        text-align: center !important;
        vertical-align: middle;
        border: 1px solid #ddd !important;
    }

    /* 左側の項目名（1列目）の見やすさ調整 */
    th:first-child, td:first-child {
        width: 100px;
        font-weight: bold;
        background-color: #f1f3f5;
        color: var(--secondary-color, #14213d);
        position: sticky; /* スクロール時も1列目を固定したい場合に有効 */
        left: 0;
        z-index: 2;
    }

    /* 表内の申込ボタンサイズをスマホ用に最適化 */
    td .cta-button {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
        white-space: nowrap;
        margin-top: 0 !important;
    }


    
    /* FAQの文字サイズ調整 */
    .faq-item {
        font-size: 1em;
        padding: 20px;
    }
}

/* さらに狭いスマホ画面（480px以下）の微調整 */
@media (max-width: 480px) {
    .step {
        min-width: 100%;
    }
    .step:not(:last-child)::after {
        display: block;
        content: "▼";
        right: 50%;
        top: auto;
        bottom: -20px;
        transform: translateX(50%);
    }
}