/* ボディとHTMLのマージンとパディングをリセット */
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }

        .main-content {
            background-color: #fff;
            padding: 10px 40px;
            margin-bottom: 20px;
            margin: 0 auto;
        }

        .main-content,
        footer {
            max-width: 960px;
            /* コンテンツ幅の調整 */
            margin: 0 auto;
            /* 中央寄せ */
        }

        img {
            max-width: 100%;
            /* 画像がコンテナの幅を超えないようにする */
            height: auto;
            /* 高さを自動調整してアスペクト比を保持 */
        }

        /* 画像を画面いっぱいに表示させるためのスタイル */
        header {
            margin: 0;
            padding: 0;
            width: 100%;
            /* 幅を画面いっぱいにする */
            overflow: hidden;
            /* はみ出た内容を隠す */
        }

        header img {
            width: 100%;
            /* 幅を画面いっぱいにする */
            height: auto;
            /* アスペクト比を保持 */
            display: block;
            /* 余白をなくす */
        }

        .header-img {
            width: 600px;
            /* 横幅を600pxに設定 */
            height: auto;
            /* 高さを自動調整 */
        }

        /* ヘッダー子要素のスタイル */
        .header-image {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 210px;
            margin: 0 auto;
            position: relative;
        }

        /* 画像のスタイル */
        .header-image img {
            width: 100%;
            height: auto;
            max-width: 100%;
            display: block;
            margin: 0 auto;
            margin-top: 40px;
        }

        .header-text {
            position: absolute;
            top: 10%;
            /* 中央より少し上に調整 */
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgb(83, 21, 54);
            /* テキストの色 */
            font-size: 12px;
            /* テキストの大きさ */
            /* 必要に応じてその他のスタイルを追加 */
        }

        .images-container {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .center-image {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .buttons-container {
            display: flex;
            justify-content: center;
            /* アイテムを中央寄せに */
            margin-top: 20px;
            margin-bottom: 70px;
            gap: 10px;
            /* ボタン間の間隔を設定 */
            width: 100%;
            align-items: center;
        }

        .neon-text {
            color: #ffffff;
            /* テキストの色 */
            text-shadow: 0 0 3px rgba(152, 118, 7, 0.753), 0 0 7px rgba(222, 178, 34, 0.753), 0 0 7px rgba(213, 151, 5, 0.543), 0 0 20px rgba(219, 153, 30, 0.763);
            /* テキストの影、パステル紫 */
            font-size: 35px;
            /* テキストの大きさ */
            font-weight: bold;
            /* 太字 */
            text-align: center;
            /* テキストを中央寄せ */
            margin-bottom: 20px;
            /* 下部のマージンを設定して、ボタンとの間隔を作る */
        }

        .neon-button {
            display: inline-block;
            /* iOS で余白を認識しやすいようにインラインブロック化 */
            -webkit-appearance: none;
            /* iOS Safari 独自のボタンスタイルを無効化 */
            appearance: none;
            /* 他ブラウザの独自スタイルも無効化 */
            background-color: #c5a509;
            /* パステル紫のボタンの背景色 */
            color: #ffffff;
            /* テキストの色 */
            border: none;
            /* 境界線なし */
            padding: 18px 80px;
            /* パディング */
            font-size: 23px;
            /* フォントサイズ */
            font-weight: bold;
            /* フォントの太さ */
            border-radius: 7px;
            /* 角の丸み */
            cursor: pointer;
            /* カーソル */
            transition: background-color 0.3s, box-shadow 0.3s;
            /* トランジション効果 */
            margin: 0px 10px 10px 10px;
            /* 上下左右に余白を指定 */
            box-sizing: border-box;
            /* パディングとボーダーを含めてサイズを計算 */
        }

        .neon-button:hover {
            background-color: #d2981a;
            /* ホバー時のパステル紫の背景色 */
            box-shadow: 0 0 15px rgba(224, 182, 16, 0.75);
            /* ホバー時のボックスの影、より明るいパステル紫 */
        }

        .login-button {
            background-color: #1a961ac2;
            /* 濃い緑色 */
            box-shadow: 0 0 10px rgba(207, 250, 202, 0.5);
            /* ボックスの影*/
        }

        /* ログインボタンのホバー時のスタイル */
        .login-button:hover {
            background-color: #77b377e0;
            /* ホバー時に少し明るい緑色に */
            box-shadow: 0 0 15px #a2eba2e0;
            /* ホバー時のボックスの影 */
        }

        /* SNSボタンのスタイル */
        .vertical-buttons iframe,
        .vertical-buttons a.twitter-share-button {
            display: block;
            /* 各要素が独自の行に配置されるように */
            margin-bottom: 10px;
            /* 最後の要素を除く、各要素の下に10pxの余白を追加 */
        }

        .vertical-buttons a.twitter-share-button:last-child {
            margin-bottom: 0;
            /* コンテナの最後の要素には余白を追加しない */
        }

        .sns-buttons {
            display: flex;
            /* 要素を水平方向に並べる */
            align-items: start;
            /* 上揃え */
        }

        .vertical-buttons {
            margin-right: -10px;
            /* LINEボタンとの間隔を設定 */
        }

        .horizontal-buttons {
            display: flex;
            /* 追加のSNSボタンを水平に並べる */
            align-items: center;
            /* 中央揃え */

        }

        /* 4) iOS で左右マージンが消えないよう、子要素に強制余白を追加 */
        .horizontal-buttons .line-it-button,
        .horizontal-buttons a,
        .horizontal-buttons img,
        .horizontal-buttons div,
        .horizontal-buttons .hatena-bookmark-button,
        .horizontal-buttons .pocket-btn {
            display: inline-block;
            margin-left: 5px;
            /* iOS対策: 左マージン */
            margin-right: 5px;
            /* iOS対策: 右マージン */
            box-sizing: border-box;
        }

        /* スマホ用画像はデフォルトでは非表示に設定 */
        .mobile-only-image {
            display: none;
        }

        .qa-section {
            background-color: #fcf9f9;
            padding: 10px 30px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
        }

        .qa-section {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            margin-bottom: 50px;
        }

        .qa {
            margin-bottom: 35px;
        }

        .question {
            font-weight: bold;
            margin-bottom: 5px;
        }

        p,
        .answer {
            line-height: 2;
        }

        input,
        select,
        textarea {
            background-color: var(--input-background-color);
            color: var(--input-text-color);
            border: 1px solid #646262;
            padding: 8px;
            box-sizing: border-box;
            /* paddingとborderを幅と高さに含める */
        }


        h1 {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        h2 {
            border-bottom: 2px solid #560754;
            padding-bottom: 5px;
            color: #560754;
            font-size: 23px;
            margin-bottom: 27px;
        }

        h3 {
            border-left: 4px solid #560754;
            padding-left: 10px;
            margin-bottom: 20px;
            color: #560754;
            font-size: 21px;
        }

        .small-text {
            font-size: 0.9em;
        }

        .big-text {
            font-size: 1.2em;
        }

        a {
            color: var(--link-text-color);
        }

        a:hover {
            color: blue;
            /* マウスオーバー時の色を青（または希望の色）に設定 */
            text-decoration: none;
        }

        /* main-content 内の no-underline クラスのリンクにマウスオーバーした時のスタイル */
        .main-content .no-underline:hover {
            color: blue;
            /* マウスオーバー時の色を青に設定 */
        }

        .no-underline {
            text-decoration: none;
            /* 下線を消去 */
        }

        /* アンダーライン設定 */
        .under1 {
            background: linear-gradient(transparent 65%, #1cf7f3 75%);
        }

        .re {
            color: #dc1818;
        }

        .centered-text {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .label-margin {
            display: block;
            margin-bottom: 8px;
        }

        /* 仕切り線 */
        .line13 {
            border-top: 2px solid #d6d4d4;
            /* 上部に1ピクセルの黒い境界線を追加 */
            height: 1px;
            /* divの高さを1ピクセルに設定 */
            margin-top: 10px;
            /* 上部に10ピクセルのマージンを設定 */
            margin-bottom: 30px;
            /* 下部に30ピクセルのマージンを設定 */
        }

        .line15 {
            border-top: 2px solid #d6d4d4;
            /* 上部に1ピクセルの黒い境界線を追加 */
            height: 1px;
            /* divの高さを1ピクセルに設定 */
            margin-top: 10px;
            /* 上部に10ピクセルのマージンを設定 */
            margin-bottom: 50px;
            /* 下部に50ピクセルのマージンを設定 */
        }

        .line55 {
            border-top: 2px solid #d6d4d4;
            height: 1px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .f25 {
            font-size: 25px;
        }

        .bb {
            font-weight: bold;
        }

        .align-top {
            align-self: flex-start;
            /* このクラスを持つアイテムを上に寄せる */
        }

        .right-float {
            float: right;
            /* このクラスを持つアイテムを文字の回り込みありで右に寄せる */
            margin: 20px 0px 10px 20px;
            /* 余白を設定 */
        }

        .top1 {
            display: block;
            margin-top: 10px;
        }

        .top3 {
            display: block;
            margin-top: 30px;
        }

        .top6 {
            display: block;
            margin-top: 60px;
        }

        .bottom3 {
            display: block;
            margin-bottom: 30px;
            /* 下部に30ピクセルのマージンを設定 */
        }

        .pc-tablet-only {
            display: block;
            /* PC用画像のCSS　デフォルトでは表示 */
            align-self: center;
            /* デフォルトでアイテムを中央寄せ */
        }

        /* PC画面では<p>タグを非表示に */
        p.mobile-only {
            display: none;
        }

        .pc-tablet-only p {
            flex: 1;
            /* 利用可能な余剰スペースを埋める */
        }

        /* スマホ用画像はデフォルトでは非表示に設定 */
        .mobile-only-image {
            display: none;
        }

        /* フッタースタイル */
        footer {
            text-align: center;
            /* フッター内のテキストを中央寄せにする */
            padding: 30px 0 20px 0;
            /* 内側の余白調整 */
        }

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

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

        footer ul li a {
            font-size: 13px;
            /* リンクの文字サイズを13pxに設定 */
        }

        footer p,
        footer p a {
            font-size: 15px;
        }

        /* スマートフォンや小さいデバイス用のスタイル */
        @media (max-width: 768px) {
            .main-content {
                padding: 10px 30px;
            }

            /* ヘッダー子要素のスタイル */
            .header-image {
                height: 150px;
            }

            /* 画像のスタイル */
            .header-image img {
                width: 90%;
            }

            .neon-text {
                font-size: 23px;
                /* テキストの大きさ */
                margin-bottom: 20px;
                /* 下部のマージンを設定して、ボタンとの間隔を作る */
            }

            .buttons-container {
                flex-direction: column;
                /* スマホ表示では縦並びに */
                align-items: center;
                /* アイテムを中央寄せ */
                margin-top: 20px;
            }

            .buttons-container .neon-button {
                width: 75%;
                /* スマホ表示でのボタンの幅をコンテナの90%に */
                max-width: 330px;
                /* ボタンの最大幅を設定 */
                font-size: 19px;
                padding: 18px 10px;
                /* パディング */
            }

            /* スマートフォンや小さいデバイスの画面サイズでは非表示 */
            .pc-tablet-only {
                display: none;
                /* 768px以下のデバイスで非表示 */
            }

            /* スマートフォンや小さいデバイスの画面サイズでのみ表示 */
            .mobile-only-image {
                display: block;
            }

            p.mobile-only {
                display: block;
            }

            /* スマートフォンなど小さい画面では<p>タグを非表示に */
            p.pc-only {
                display: none;
            }

            h2 {
                font-size: 22px;
            }

            h3 {
                font-size: 22px;
            }

            /* フッタースタイル */
            footer {
                padding: 25px 0px 2px 0px;
                /* 上下のパディングを設定 */
            }

            footer ul li a {
                font-size: 12px;
                /* リンクの文字サイズを12pxに設定 */
            }

            footer p,
            footer p a {
                font-size: 12px;
                margin-top: 10px;
                /* 上のマージンを10pxに設定 */
            }
        }