/* 全体のスタイルのリセット */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* htmlとbodyのスタイル設定 */
        html,
        body {
            height: 100%;
            font-family: 'Arial', sans-serif;
            background-color: #fff5fa;
            color: #333;
            line-height: 1.6;
        }

        /* 全体のレイアウト調整 */
        body {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* コンテンツ部分のスタイル設定 */
        #content {
            flex: 1;
            padding: 50px 150px;
            max-width: 100%;
            /* 幅が画面の幅を超えないように設定 */
            box-sizing: border-box;
            /* パディングを含めたサイズにする */
        }

        /* 画像を中央寄せにし、最大幅を800pxに設定 */
        .center {
            display: block;
            /* ブロック要素として表示 */
            margin-left: auto;
            /* 左右のマージンを自動 */
            margin-right: auto;
            max-width: 800px;
            /* PCの場合の最大横幅 */
            width: 100%;
            /* 横幅を100%に設定（max-widthと組み合わせて使用） */
            height: auto;
            /* 高さを自動調整 */
            margin-top: 30px;
            /* 上部に30pxの余白 */
            margin-bottom: 40px;
            /* 下部に40pxの余白 */
        }

        .max500 {
            width: 500px;
        }

        /* 見出し1のスタイル */
        h1 {
            color: #b91138c2;
            font-size: 1.5rem;
            margin-top: 30px;
            margin-bottom: 50px;
            font-weight: bold;
            text-align: center;
            border-bottom: 3px solid #e46a6a;
            padding-bottom: 10px;
            letter-spacing: 2px;
        }

        /* 見出し2のスタイル */
        h2 {
            color: #b54848;
            font-size: 1.7rem;
            margin-top: 15px;
            margin-bottom: 50px;
            font-weight: bold;
            border-left: 8px solid #e46a6a;
            padding-left: 15px;
            background-color: #ffeef5;
            padding: 10px;
            border-radius: 5px;
        }

        /* 見出し3のスタイル */
        h3 {
            color: #a32c2c;
            font-size: 1.5rem;
            margin-top: 20px;
            margin-bottom: 40px;
            font-weight: bold;
            border-bottom: 2px dashed #e46a6a;
            padding-bottom: 5px;
        }

        /* 見出し4のスタイル */
        h4 {
            color: #8b3d3d;
            font-size: 1.3rem;
            margin-top: 35px;
            margin-bottom: 10px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: bold;
            position: relative;
        }

        h4::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 50px;
            height: 2px;
            background-color: #b54848;
        }

        /* 段落のスタイル */
        p {
            line-height: 1.7;
            /* 行の高さを文字の大きさの1.7倍に設定 */
            margin-bottom: 30px;
        }

        .small-text {
            font-size: 0.9em;
            /* フォントサイズを小さく設定 */
        }

        .big-text {
            font-size: 1.2em;
            /* フォントサイズを大きく設定 */
        }

        .re {
            color: #dc1818;
        }

        /* キャプション付き画像の枠スタイル */
        .cap {
            text-align: center;
            font-size: 0.85rem;
            margin-top: 20px;
            margin-bottom: 50px;
        }

        .cap img {
            display: block;
            max-width: 800px;
            width: 100%;
            height: auto;
            /* 画像の縦横比を維持する */
            margin: 0 auto;
        }

        /* リンクのスタイル */
        a {
            color: #e46a6a;
            /* リンクの色を設定 */
        }

        /* マウスオーバー時のリンク色 */
        a:hover {
            color: #b54848;
        }

        /* リンクの下線を削除 */
        .no-underline {
            text-decoration: none;
        }

        /* リンクにマウスオーバー時の色を設定 */
        .no-underline:hover {
            color: rgb(51, 51, 54);
        }

        /* リンクの下線を削除 */
        .no-underline-black {
            text-decoration: none;
            color: #262525;
            /* リンクの色を指定 */
        }

        /* リンクにマウスオーバー時の色を設定 */
        .no-underline-black:hover {
            color: rgb(51, 51, 54);
        }

        /* シンプルな仕切り線 */
        .hr-line {
            border: none;
            /* デフォルトのボーダーを削除 */
            border-top: 2px solid #e46a6a;
            /* 上部に2pxの線を追加 */
            margin: 20px 0;
            /* 上下に20pxの余白を追加 */
            width: 100%;
            /* 線の幅を100%に設定 */
            max-width: 1200px;
            /* 最大幅を1200pxに設定 */
            margin-left: auto;
            /* 左右のマージンを自動調整（中央寄せ） */
            margin-right: auto;
            opacity: 0.8;
            /* 少し薄くして軽やかな印象に */
            margin-top: 40px;
            margin-bottom: 50px;
        }

        /* シンプルかつお洒落な枠のスタイル */
        .elegant-box {
            border: 2px solid #e46a6a;
            /* 外枠の色と太さ */
            border-radius: 10px;
            /* 角を丸くする */
            padding: 20px 15px 10px 15px;
            /* 内側の余白 */
            background-color: #fff5fa;
            /* 背景色 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 軽い影をつける */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            /* マウスオーバー時のアニメーション */
        }

        /* マウスオーバー時の効果 */
        .elegant-box:hover {
            transform: translateY(-5px);
            /* 少し上に浮くような効果 */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            /* 影を強調 */
        }

        ul {
            list-style-type: disc;
            /* リストマーカーをディスクに設定 */
            padding-left: 30px;
            /* リスト全体の左側余白 */
            margin-top: 10px;
            /* リスト全体の下部余白 */
        }

        li {
            margin-bottom: 15px;
            /* 各リスト項目の下部余白を調整 */
            line-height: 1.8;
            /* 行間の調整 */
        }


        ol.pink-ol {
            counter-reset: custom-counter;
            list-style: none;
            padding-left: 0;
            margin-left: 0;
        }

        ol.pink-ol li {
            counter-increment: custom-counter;
            position: relative;
            padding-left: 2.8em;
            margin-bottom: 1.1em;
            min-height: 2.2em;
        }

        ol.pink-ol li::before {
            content: counter(custom-counter);
            position: absolute;
            left: 0;
            top: 0;
            width: 1.7em;
            height: 1.7em;
            background: linear-gradient(135deg, #ff70a6 0%, #ff8fab 100%);
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 1.7em;
            font-weight: bold;
            font-size: 1.14em;
            box-shadow: 0 2px 6px rgba(255, 120, 180, 0.16);
            transition: background 0.2s;
        }

        ol.pink-ol li:hover::before {
            background: linear-gradient(135deg, #ff3385 0%, #f97ca4 100%);
        }

        /* elegant-box2のスタイル */
        .elegant-box2 {
            background-color: #fff0f5;
            /* ほとんど白に近いごく薄いピンク */
            border: 1px solid #e4a6a6;
            /* 柔らかいピンク系のボーダー */
            border-radius: 10px;
            /* 角を丸くする */
            padding: 10px 40px 10px 20px;
            /* 内側の余白 */
            margin: 10px 0;
            /* 上下に20pxの余白 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 軽い影をつける */
        }

        /* ordered list (ol) のスタイル */
        .elegant-box2 ol {
            padding-left: 30px;
            /* 左側の余白を追加 */
            margin-top: 30px;
            /* リスト全体の下部余白を追加 */
            margin-bottom: 20px;
            /* リスト全体の下部余白を追加 */
        }

        /* list item (li) のスタイル */
        .elegant-box2 li {
            margin-bottom: 30px;
            /* 各リスト項目の下部余白を調整 */
            line-height: 1.7;
            /* 行間の調整 */
            color: #333;
            /* テキストの色をダークグレーに設定 */
            font-size: 1.15rem;
            /* フォントサイズを設定 */
        }

        /* 上部ログインフォームおよびログアウトボタンのスタイル */
        #login-form {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #ffeef5;
            padding: 10px 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }

        /* ログインフォームとログアウトフォームの共通スタイル */
        #login-form-content,
        #logout-form {
            display: flex;
            align-items: center;
        }

        /* ログインフォーム内のスタイル */
        #login-form-content {
            margin-left: auto;
        }

        /* ログインフォーム内のラベルのスタイル */
        #login-form label {
            font-size: 0.7rem;
            margin-right: 5px;
            color: #555;
        }

        /* ログインフォーム内のテキスト入力とパスワード入力フィールドのスタイル */
        #login-form input[type="text"],
        #login-form input[type="password"] {
            width: 100px;
            padding: 5px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.85rem;
        }

        /* ログインボタンとログアウトボタンのスタイル */
        #login-form button,
        #logout-form button {
            background-color: #ff6f91;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.7rem;
            margin-left: 10px;
        }

        /* ログインボタンとログアウトボタンにマウスオーバー時のスタイル */
        #login-form button:hover,
        #logout-form button:hover {
            background-color: #ff5078;
        }

        /* フォーム内のラベルをブロック要素として設定 */
        #purchase-form label {
            display: block;
        }

        /* ユーザー名表示部分のスタイル */
        #welcome-message {
            font-size: 0.9rem;
            color: #ff6f91;
            text-align: center;
            flex-grow: 1;
            margin-left: 15px;
        }

        /* ログインフォーム内のアイコン画像のスタイル */
        #dashboard-icon {
            height: 35px;
            display: inline-block;
            /* インライン要素として扱う */
            vertical-align: middle;
            /* テキストと画像の垂直位置を揃える */
        }

        /* ログイン時のボタンアニメーション */
        .blinking {
            animation: blinker 1s linear infinite;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }

        /* エラーメッセージのスタイル */
        .error-message {
            color: #df4367;
            margin-top: 7px;
            font-size: 1rem;
            text-align: left;
        }

        /* 成功メッセージのスタイル */
        .success-message {
            color: rgb(68, 69, 68);
            margin-top: 5px;
            text-align: center;
        }


        /* 購入手続きボタンのスタイル */
        .purchase-button {
            margin-bottom: 18px;
        }

        /* モーダル（ポップアップ）全体のスタイル */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        /* モーダルのコンテンツ部分のスタイル */
        .modal-content {
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 70px 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 1000px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* モーダル内のテキスト入力とメール入力フィールドのスタイル */
        .modal-content input[type="text"],
        .modal-content input[type="email"] {
            width: 90%;
            padding: 10px;
            margin-bottom: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1.1rem;
        }

        /* モーダル内のラベルのスタイル */
        .modal-content label {
            margin-top: 20px;
        }

        /* モーダル内のボタンのスタイル */
        .modal-content button {
            background-color: #ff6f91;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9rem;
            margin-top: 20px;
        }

        /* モーダル内のボタンにマウスオーバー時のスタイル */
        .modal-content button:hover {
            background-color: #ff5078;
        }

        /* モーダルの閉じるボタンのスタイル */
        .close {
            color: #aaa;
            font-size: 50px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 20px;
        }

        /* 閉じるボタンにマウスオーバー時のスタイル */
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 追尾広告（ページ下部に固定表示される広告）のスタイル */
        #ad-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            /* 子要素を横並びに配置 */
            z-index: 1001;
        }

        /* 左右の透過ピンク部分のスタイル */
        #ad-banner-left,
        #ad-banner-right {
            width: 20%;
            /* 左右20%ずつを占有 */
            background-color: rgba(250, 233, 237, 0.9);
            /* 透過の薄いピンク */
        }

        /* 中央の広告部分のスタイル */
        #ad-banner-center {
            flex-grow: 1;
            /* 残りのスペースを占有 */
            background-color: #ed7994;
            /* 透過しない背景色 */
            color: white;
            text-align: center;
            padding: 10px 0;
        }

        #ad-banner-center p {
            margin: 0;
            font-size: 1.3rem;
        }

        #ad-banner-center a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.3rem;
        }

        #ad-banner-center a:hover {
            text-decoration: underline;
        }

        /* ページトップに戻るボタンのスタイル */
        #scroll-to-top {
            position: fixed;
            bottom: 60px;
            /* 少し上に配置 */
            right: 50px;
            width: 48px;
            height: 48px;
            background-color: #ff0022b3;
            color: white;
            border: none;
            border-radius: 50%;
            /* 丸い形にする */
            cursor: pointer;
            z-index: 2000;
            /* 追尾広告よりも上に表示 */
            display: none;
            font-size: 25px;
            /* 三角形のサイズを調整 */
            text-align: center;
        }

        #scroll-to-top::before {
            content: '▲';
            /* 三角形の記号を表示 */
            display: inline-block;
            transform: rotate(0deg);
            /* 三角形が上向きになるように調整 */
        }

        #scroll-to-top:hover {
            background-color: #ff00226d;
        }

        /* フッターのスタイル */
        #footer {
            background-color: #ffeef5;
            color: #e99494;
            text-align: center;
            padding: 5px 0px 10px 0px;
            width: 100%;
            max-width: 100%;
            /* 幅が画面の幅を超えないように設定 */
            font-size: 0.9rem;
            margin-top: auto;
            position: relative;
            box-sizing: border-box;
            /* パディングを含めたサイズにする */
        }

        footer ul {
            list-style: none;
            /* リストのスタイルをなしにする */
            padding: 0;
            /* パディングをリセットする */
            display: inline-block;
            /* リストをインラインブロックとして表示 */
            margin-bottom: 5px;
        }

        footer ul li {
            display: inline;
            /* リストアイテムを横並びに表示 */
            margin-right: 20px;
            /* リストアイテム間の間隔 */
        }

        footer ul li a {
            font-size: 0.7rem;
        }

        /* コードボックスのスタイル */
        .code-box {
            background-color: #2d2d2d;
            color: #ffffff;
            padding: 5px;
            border-radius: 5px;
            font-family: 'Courier New', Courier, monospace;
            overflow: auto;
            position: relative;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .copy-button {
            background-color: #9b091dc1;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .copy-button:active {
            background-color: #9b091c69;
        }

        /* ページ上部のキャラクターや時刻のスタイル調整 */
        .item-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: -20px;
            margin-bottom: 40px;
        }

        .left-content {
            display: flex;
            align-items: center;
        }

        .image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .product-image {
            width: 30px;
            height: auto;
        }

        .sfp-label {
            margin-top: 2px;
            margin-left: 2px;
            font-size: 11px;
            text-align: center;
        }

        .date {
            text-align: left;
            font-size: 11px;
            margin-top: -15px;
            margin-left: 10px;
        }

        .right-content {
            display: flex;
            justify-content: flex-end;
            width: auto;
        }

        .price {
            text-align: right;
            font-weight: bold;
            color: green;
            font-size: 12px;
        }

        /* メディアクエリで画面サイズに応じたスタイル調整 */
        @media (max-width: 768px) {

            .close {
                font-size: 30px;
                top: 5px;
                right: 10px;
            }

            /* コンテンツ部分のスタイル設定 */
            #content {
                width: 100%;
                padding: 35px 30px;
            }

            .max500 {
                width: 100%;
                max-width: 500px;
            }

            #login-form {
                width: 100%;
            }

            /* ログインフォーム内のスタイルを調整 */
            #login-form-content {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                width: 100%;
            }

            /* ユーザー名とパスワードをそれぞれ縦に並べる */
            .input-group {
                display: flex;
                flex-direction: column;
                width: 45%;
            }

            /* ユーザー名、パスワード、ログインボタンの文字の大きさを調整 */
            #login-form label {
                font-size: 0.7rem;
                /* ラベルの文字サイズを調整 */
                margin-left: 18px;
                margin-bottom: 2px;
            }

            /* 入力フィールドの幅と余白を調整 */
            #login-form input[type="text"],
            #login-form input[type="password"] {
                width: 80%;
                padding: 5px;
                /* 入力フィールドの内側余白を調整 */
                margin-bottom: 5px;
                margin-left: 20px;
                margin-right: 0px;
                font-size: 0.8rem;
                /* 入力フィールド内の文字サイズを調整 */
            }

            /* ログインボタンのスタイル */
            #login-form .login-btn {
                align-self: flex-end;
                padding: 8px 8px;
                /* ログインボタンの内側余白を調整 */
                font-size: 0.7rem;
                /* ログインボタンの文字サイズを調整 */
                margin-left: 20px;
                margin-top: 5px;
                margin-bottom: 5px;
                width: 30%;
                /* ログインボタンの幅を指定 */
            }

            /* ログアウトボタンのスタイル */
            #login-form .logout-btn {
                padding: 8px 10px;
                /* ログアウトボタンの内側余白を調整 */
                font-size: 0.6rem;
                /* ログアウトボタンの文字サイズを調整 */
                margin-left: 10px;
                width: auto;
                /* ログアウトボタンの幅を自動調整 */
            }

            /* ページトップに戻るボタンのスタイル */
            #scroll-to-top {
                background-color: #ff0022b3;
                color: white;
                bottom: 40px;
                right: 15px;
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            #scroll-to-top:hover {
                background-color: #ff0022b3;
            }

            /* 見出し1のスタイル */
            h1 {
                font-size: 1.2rem;
                margin: 25px -10px 45px -10px;
            }

            /* 見出し2のスタイル */
            h2 {
                font-size: 1.4rem;
                margin: 15px -10px 50px -10px;
            }

            /* 見出し3のスタイル */
            h3 {
                font-size: 1.3rem;
                margin: 15px -10px 40px -10px;
            }

            /* 見出し4のスタイル */
            h4 {
                font-size: 1.2rem;
                margin: 25px -10px 10px -10px;
            }

            /* ログインフォーム内のアイコン画像のスタイル */
            #dashboard-icon {
                margin-top: 8px;
                height: 31px;
            }
        }

        .login-caption {
            font-size: 0.75rem;
            margin: 0px 0px 0px 5px;
        }


        .hero-box {
            background: linear-gradient(135deg, #fff7fb 0%, #ffeaf3 100%);
            border: 2px solid #f2b6c8;
            border-radius: 18px;
            padding: 34px 28px;
            margin: 10px 0 45px;
            box-shadow: 0 10px 30px rgba(228, 106, 106, 0.12);
        }

        .hero-lead {
            font-size: 2rem;
            line-height: 1.45;
            font-weight: bold;
            color: #a32145;
            margin-bottom: 22px;
        }

        .hero-lead .accent-strong {
            color: #d81b60;
        }

        .hero-sub {
            font-size: 1.08rem;
            margin-bottom: 20px;
        }

        .hero-mini {
            display: inline-block;
            background: #fff;
            border: 1px solid #f2bfd0;
            color: #a32c2c;
            font-weight: bold;
            border-radius: 999px;
            padding: 8px 16px;
            margin-bottom: 18px;
            font-size: 0.95rem;
        }

        .highlight-box {
            background: #fff;
            border: 2px dashed #e46a6a;
            border-radius: 14px;
            padding: 18px 20px;
            margin: 24px 0 12px;
        }

        .highlight-box p {
            margin-bottom: 0;
        }

        .price-big {
            font-size: 1.7rem;
            font-weight: bold;
            color: #d71f52;
        }

        .cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 24px;
            margin-bottom: 10px;
        }

        .cta-btn {
            display: inline-block;
            padding: 14px 22px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
        }

        .cta-btn:hover {
            transform: translateY(-2px);
            opacity: 0.95;
        }

        .cta-btn-primary {
            background: linear-gradient(135deg, #ff5f8f 0%, #e94373 100%);
            color: #fff;
            box-shadow: 0 8px 20px rgba(233, 67, 115, 0.22);
        }

        .cta-btn-secondary {
            background: #fff;
            color: #b54848;
            border: 2px solid #e9a8bb;
        }

        .section-note {
            font-size: 0.96rem;
            color: #7b4b56;
            margin-top: 8px;
        }

        .problem-list li,
        .feature-list li,
        .industry-list li,
        .action-list li {
            margin-bottom: 16px;
        }

        .marker {
            background: linear-gradient(transparent 58%, #ffd3e1 58%);
            font-weight: bold;
        }

        .warning-box {
            background: #fff8fb;
            border-left: 6px solid #e46a6a;
            padding: 18px 18px 12px;
            border-radius: 8px;
            margin: 18px 0 28px;
        }

        .steps-box {
            background: #fff9fc;
            border: 1px solid #efc7d4;
            border-radius: 14px;
            padding: 22px 22px 8px;
            margin: 18px 0 30px;
        }

        .plan-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            margin: 20px 0 25px;
        }

        .plan-card {
            background: #fff;
            border: 2px solid #f0c2cf;
            border-radius: 16px;
            padding: 24px 20px 18px;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
        }

        .plan-card.recommended {
            border: 2px solid #e94373;
            box-shadow: 0 10px 24px rgba(233, 67, 115, 0.12);
            position: relative;
        }

        .plan-badge {
            display: inline-block;
            background: #e94373;
            color: #fff;
            font-size: 0.8rem;
            font-weight: bold;
            border-radius: 999px;
            padding: 6px 12px;
            margin-bottom: 14px;
        }

        .plan-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #a32c2c;
            margin-bottom: 12px;
        }

        .plan-price {
            font-size: 1.45rem;
            font-weight: bold;
            color: #d71f52;
            margin: 10px 0 14px;
        }

        .demo-links {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 16px;
            margin-bottom: 10px;
        }

        .demo-link {
            display: inline-block;
            text-decoration: none;
            padding: 12px 18px;
            border-radius: 999px;
            border: 1px solid #e4a6b8;
            background: #fff;
            color: #b54848;
            font-weight: bold;
        }

        .demo-link:hover {
            background: #fff3f7;
        }

        .closing-box {
            background: linear-gradient(135deg, #fff7fa 0%, #fff0f5 100%);
            border: 1px solid #efc7d4;
            border-radius: 16px;
            padding: 24px 22px 16px;
            margin-top: 20px;
        }

        .faq-intro {
            color: #8a4a58;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .hero-box {
                padding: 24px 18px;
                border-radius: 14px;
            }

            .hero-lead {
                font-size: 1.45rem;
                line-height: 1.5;
            }

            .hero-sub {
                font-size: 1rem;
            }

            .price-big {
                font-size: 1.35rem;
            }

            .cta-row,
            .demo-links {
                flex-direction: column;
            }

            .cta-btn,
            .demo-link {
                width: 100%;
                text-align: center;
            }

            .plan-grid {
                grid-template-columns: 1fr;
            }
        }


        /* ================================
   対応ジャンルセクション
================================ */
        .genre-section {
            margin: 30px 0 40px;
            padding: 28px 24px 24px;
            border-radius: 20px;
            background: linear-gradient(135deg, #fff8fb 0%, #ffeef5 100%);
            border: 2px solid #f3c4d3;
            box-shadow: 0 12px 30px rgba(228, 106, 106, 0.10);
        }

        .genre-label {
            display: inline-block;
            margin-bottom: 14px;
            padding: 7px 14px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #efbfd0;
            color: #b54848;
            font-size: 0.82rem;
            font-weight: bold;
            letter-spacing: 0.08em;
        }

        .genre-title {
            margin: 0 0 14px;
            font-size: 1.9rem;
            line-height: 1.5;
            color: #a32145;
            font-weight: bold;
        }

        .genre-desc {
            margin-bottom: 24px;
            color: #7b4b56;
            font-size: 1rem;
            line-height: 1.9;
        }

        .genre-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            margin-top: 18px;
        }

        .genre-chip {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 62px;
            padding: 14px 14px;
            border-radius: 16px;
            background: #fff;
            border: 1px solid #f0c7d3;
            box-shadow: 0 6px 14px rgba(190, 110, 140, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .genre-chip:hover {
            transform: translateY(-2px);
            border-color: #e7a7bb;
            box-shadow: 0 10px 22px rgba(190, 110, 140, 0.14);
        }

        .genre-icon {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #ffd8e5 0%, #ffc1d6 100%);
            font-size: 1.15rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .genre-text {
            font-size: 0.95rem;
            font-weight: bold;
            color: #7f3047;
            line-height: 1.5;
        }

        .genre-note {
            margin-top: 18px;
            margin-bottom: 0;
            font-size: 0.92rem;
            color: #8a5c67;
        }

        @media (max-width: 1024px) {
            .genre-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .genre-section {
                padding: 22px 16px 18px;
                border-radius: 16px;
                margin: 20px 0 30px;
            }

            .genre-title {
                font-size: 1.45rem;
                line-height: 1.55;
            }

            .genre-desc {
                font-size: 0.96rem;
                margin-bottom: 18px;
            }

            .genre-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .genre-chip {
                min-height: 58px;
                padding: 12px 10px;
                gap: 8px;
                border-radius: 14px;
            }

            .genre-icon {
                width: 34px;
                height: 34px;
                flex-basis: 34px;
                font-size: 1rem;
                border-radius: 10px;
            }

            .genre-text {
                font-size: 0.86rem;
                line-height: 1.4;
            }
        }

        @media (max-width: 480px) {
            .genre-grid {
                grid-template-columns: 1fr;
            }
        }


        /* ================================
   使い方（HOW IT WORKS）
================================ */
        .howto-section {
            margin: 26px 0 38px;
            padding: 30px 24px 24px;
            border-radius: 20px;
            background: linear-gradient(135deg, #fff9fc 0%, #fff0f6 100%);
            border: 2px solid #f1c7d4;
            box-shadow: 0 10px 28px rgba(228, 106, 106, 0.10);
        }

        .howto-label {
            display: inline-block;
            margin: 0 auto 14px;
            padding: 7px 16px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #efbfd0;
            color: #b54848;
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.08em;
        }

        .howto-label-wrap {
            text-align: center;
        }

        .howto-title {
            margin: 0 0 14px;
            text-align: center;
            font-size: 1.9rem;
            line-height: 1.5;
            color: #a32145;
            font-weight: bold;
        }

        .howto-lead {
            text-align: center;
            color: #7b4b56;
            font-size: 1rem;
            line-height: 1.9;
            margin-bottom: 24px;
        }

        .howto-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin-top: 12px;
        }

        .howto-card {
            background: #fff;
            border: 1px solid #f0c7d3;
            border-radius: 18px;
            padding: 22px 18px 18px;
            box-shadow: 0 8px 18px rgba(190, 110, 140, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .howto-card:hover {
            transform: translateY(-2px);
            border-color: #e8a9bc;
            box-shadow: 0 12px 22px rgba(190, 110, 140, 0.13);
        }

        .howto-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff77a9 0%, #f05f91 100%);
            color: #fff;
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 14px;
            box-shadow: 0 6px 14px rgba(240, 95, 145, 0.22);
        }

        .howto-card-title {
            font-size: 1.08rem;
            font-weight: bold;
            color: #a32c2c;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .howto-card-text {
            font-size: 0.95rem;
            color: #6e5460;
            line-height: 1.85;
            margin-bottom: 0;
        }

        /* デモ前の簡易まとめ */
        .demo-recap-box {
            margin: 16px 0 20px;
            padding: 18px 18px 14px;
            border-radius: 16px;
            background: #fff7fb;
            border: 1px solid #efc7d4;
            box-shadow: 0 8px 18px rgba(190, 110, 140, 0.07);
        }

        .demo-recap-box {
            margin: 16px 0 20px;
            padding: 20px 20px 16px;
            border-radius: 16px;
            background: linear-gradient(135deg, #fffafc 0%, #fff3f8 100%);
            border: 1px solid #f2d7e1;
            box-shadow: 0 8px 18px rgba(190, 110, 140, 0.06);
        }

        .demo-recap-title {
            font-size: 1.04rem;
            font-weight: bold;
            color: #9f1f4e;
            margin-bottom: 12px;
        }

        .demo-recap-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 14px;
            padding: 0;
            list-style: none;
        }

        .demo-recap-steps li {
            margin: 0;
            padding: 10px 14px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #e7c9d4;
            color: #b54848;
            font-size: 0.93rem;
            font-weight: bold;
            line-height: 1.5;
            box-shadow: 0 2px 8px rgba(190, 110, 140, 0.05);
        }

        .demo-recap-note {
            margin-bottom: 0;
            color: #6d6470;
            font-size: 0.94rem;
            line-height: 1.85;
        }

        @media (max-width: 900px) {
            .howto-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .howto-section {
                padding: 24px 16px 18px;
                border-radius: 16px;
                margin: 20px 0 30px;
            }

            .howto-title {
                font-size: 1.45rem;
                line-height: 1.55;
            }

            .howto-lead {
                font-size: 0.96rem;
                margin-bottom: 18px;
            }

            .howto-card {
                padding: 18px 14px 14px;
                border-radius: 14px;
            }

            .howto-num {
                min-width: 48px;
                height: 48px;
                font-size: 1.05rem;
            }

            .howto-card-title {
                font-size: 1rem;
            }

            .howto-card-text {
                font-size: 0.92rem;
            }

            .demo-recap-steps {
                flex-direction: column;
            }

            .demo-recap-steps li {
                width: 100%;
            }
        }


        /* ================================
   導入前の不安解消セクション
================================ */
.section {
    margin: 34px 0 40px;
}

.section-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-bg {
    background: transparent;
}

.section-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #efbfd0;
    color: #b54848;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.section-title {
    margin: 0 0 18px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    color: #a32145;
    font-size: 1.9rem;
    line-height: 1.5;
    font-weight: bold;
}

.faq-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.faq-item {
    background: linear-gradient(135deg, #fffafc 0%, #fff2f7 100%);
    border: 1px solid #efc7d4;
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow: 0 8px 18px rgba(190, 110, 140, 0.07);
}

.faq-q {
    position: relative;
    padding-left: 2.4em;
    margin-bottom: 10px;
    color: #9f1f4e;
    font-size: 1.03rem;
    font-weight: bold;
    line-height: 1.75;
}

.faq-q::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff77a9 0%, #f05f91 100%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(240, 95, 145, 0.20);
}

.faq-a {
    position: relative;
    padding-left: 2.55em;
    margin: 0;
    color: #6d6470;
    font-size: 0.96rem;
    line-height: 1.9;
}

.faq-a::before {
    content: "A";
    position: absolute;
    left: 0.2em;
    top: 0.02em;
    color: #c93161;
    font-weight: bold;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .section {
        margin: 26px 0 30px;
    }

    .section-title {
        font-size: 1.45rem;
        line-height: 1.55;
        margin-bottom: 14px;
    }

    .faq-item {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .faq-q {
        font-size: 0.98rem;
        padding-left: 2.25em;
    }

    .faq-a {
        font-size: 0.93rem;
        padding-left: 2.2em;
    }
}