/* style_gpt.css */
@charset "UTF-8";
 
/* Interフォントを読み込む */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
       
        /* カスタムスクロールバー (任意) */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #e2e8f0; /* slate-200 */
        }
        ::-webkit-scrollbar-thumb {
            background: #94a3b8; /* slate-400 */
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b; /* slate-500 */
        }
        /* チェックボックスのカスタムスタイル */
        .custom-checkbox:checked {
            background-color: #10b981; /* Tailwind emerald-500 */
            border-color: #10b981;
        }
        .custom-checkbox:checked::before {
            content: '?';
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            color: white;
            font-size: 0.75rem; /* 12px */
            line-height: 1rem; /* 16px, チェックボックスの高さに合わせる */
        }
       body {
    font-family: sans-serif;
    margin: 0; /* コンテナの中央寄せのためボディのマージンは基本0 */
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    box-sizing: border-box; /* パディングを幅に含める */
}

/* コンテンツ全体を囲むコンテナ */
.containeri {
    /* PC向けのデフォルトスタイル (例: 1024px以上の画面) */
    width: 70%; /* 画面幅の60% */
    max-width: 1200px; /* 広がりすぎを防ぐ最大幅 */
    min-width: 300px; /* 狭くなりすぎを防ぐ最小幅 */
    margin: 20px auto; /* 上下20px、左右autoで中央寄せ */
    padding: 20px; /* コンテナの内側パディング */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box; /* パディングを幅に含める */
}

h1 {
    color: #0056b3;
    text-align: center;
    margin-top: 0; /* コンテナ内の最初の要素なので上マージンを調整 */
    margin-bottom: 30px;
}

.form-section {
    margin-bottom: 20px;
    padding: 15px; /* デフォルトのパディング (PC/タブレット用) */
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

input[type="text"],
textarea {
    width: calc(100% - 22px); /* Adjust for 10px padding + 1px border * 2 sides */
    padding: 10px; /* デフォルトのパディング (PC/タブレット用) */
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 1em;
}

textarea {
    height: 80px;
    resize: vertical; /* Allow vertical resizing */
}

/* 画風の選択肢 (チェックボックス用) */
.style-options label {
    display: inline-block; /* ラベルを横並びに */
    margin-right: 15px; /* ラベル間のスペース */
    font-weight: normal;
    cursor: pointer;
    /* チェックボックスとラベルの間の縦方向アライメントを調整 */
    vertical-align: middle;
}

/* チェックボックス自体のアライメントを調整 */
.style-options input[type="checkbox"] {
     vertical-align: middle;
     margin-right: 5px; /* チェックボックスとテキストの間のスペース */
}


.button-group {
    margin-top: 20px;
    text-align: center;
    /* スマホでボタンが横並びにならない場合のためにflexboxを設定 */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 10px; /* ボタン間の隙間 */
}

button {
    padding: 10px 25px; /* デフォルトのパディング (PC/タブレット用) */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em; /* デフォルトのフォントサイズ */
    transition: background-color 0.3s ease;
}

button#generateButton {
    background-color: #28a745;
    color: white;
}

button#generateButton:hover {
    background-color: #218838;
}

button#clearButton {
    background-color: #ffc107;
    color: #333;
}

button#clearButton:hover {
    background-color: #e0a800;
}

.output-area {
    margin-top: 30px;
    padding: 15px; /* デフォルトのパディング (PC/タブレット用) */
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9; /* 出力エリアの背景色をコンテナと変えて区別しやすく */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.output-area textarea {
    width: 100%;
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #eee;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.output-area p {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}


/* --- レスポンシブ対応 --- */

/* タブレット向けのスタイル (画面幅 768px から 1023px の間) */
@media (max-width: 1023px) {
    .containeri {
        width: 80%; /* タブレットでは幅を80%に */
        margin: 15px auto; /* 上下のマージンを少し減らす */
        padding: 15px; /* 内側のパディングを調整 */
    }

    h1 {
        font-size: 2em; /* タブレットでも見やすいサイズ */
    }

    .form-section,
    .output-area {
        padding: 15px; /* そのまま */
    }

    input[type="text"],
    textarea {
        padding: 10px; /* そのまま */
        width: calc(100% - 22px); /* そのまま */
    }

    button {
        padding: 10px 20px; /* ボタンのパディングを微調整 */
        font-size: 1em; /* そのまま */
    }

    .button-group {
         gap: 15px; /* ボタン間の隙間を調整 */
    }
}

/* スマホ向けのスタイル (画面幅 767px以下) */
@media (max-width: 767px) {
    body {
        padding: 5px; /* bodyのパディングをさらに減らす */
    }

    .containeri {
        width: 98%; /* スマホではほとんど全幅に */
        margin: 5px auto; /* 上下のマージンをさらに減らす */
        padding: 10px; /* 内側のパディングを減らす */
        box-shadow: none; /* スマホではシャドウをなくすか弱くする */
        border-radius: 0; /* スマホでは角丸をなくすか小さくする */
    }

     h1 {
        font-size: 1.6em; /* タイトルを小さく */
        margin-bottom: 20px;
    }

    .form-section,
    .output-area {
        padding: 10px; /* セクション/出力エリアのパディングを減らす */
        border-radius: 5px; /* セクション/出力エリアの角丸を小さく */
    }

    label {
        font-size: 0.95em; /* ラベルのフォントサイズを調整 */
        margin-bottom: 5px;
    }

    input[type="text"],
    textarea {
        padding: 8px; /* 入力フィールドのパディングを減らす */
        width: calc(100% - 18px); /* パディング変更に合わせて幅を再計算 */
        font-size: 0.95em; /* 入力フィールドのフォントサイズを調整 */
    }

    textarea {
        height: 60px; /* テキストエリアの高さを調整 */
    }

    .style-options label {
        margin-right: 10px; /* ラベル間のマージンを減らす */
    }
     /* スマホで画風の選択肢が縦並びになりすぎないように調整 */
    .style-options label {
        /* inline-blockはそのまま */
        margin-right: 8px; /* スペースをさらに減らす */
        margin-bottom: 4px; /* 縦方向のスペース */
        font-size: 0.9em; /* フォントサイズを小さく */
    }
    .style-options input[type="checkbox"] {
         margin-right: 3px; /* チェックボックスとテキストの間のスペース */
    }


    .button-group {
        margin-top: 15px;
        gap: 8px; /* ボタン間の隙間を減らす */
    }

    button {
        padding: 8px 15px; /* ボタンのパディングを減らす */
        font-size: 0.9em; /* ボタンのフォントサイズを小さく */
    }

    .output-area p {
        font-size: 0.85em; /* 注意書きのフォントサイズを小さく */
    }
}


 .hero-section2 {
            /* ヒーローセクションの高さとレイアウトを設定 */
            height:30vh; /* デスクトップでの高さを調整 */
            position: relative;
            display: flex;
            align-items: center; /* コンテンツを垂直方向中央に配置 */
            justify-content: center; /* コンテンツを水平方向中央に配置 */
            text-align: center;
            overflow: hidden;
            background-color: #000; /* 背景を単色の黒に設定 */
            margin-top:0vh;
        }
        
        .hero-content2 {
            /* テキストコンテンツのスタイリング */
            position: relative;
          
        }

        /* 画面幅が768px以下の場合のスタイル */
        @media (max-width: 768px) {
            .hero-section2 {
                height: 20vh; /* モバイルでの高さを調整 */
            }
        }