/**
 * submit.css - 質問投稿ページ固有のスタイル
 * v1.92L27: submit_question.phpのインラインCSSから外部化
 */


        /* ========================================
           フォントサイズ修正（v1.91L39）
           common.cssのhtml { font-size: 62.5%; }を上書き
           ========================================*/
        html {
            font-size: 100%;
        }
        
        /* ========================================
           CSS変数定義（ここで一括管理）
           ========================================*/
        :root {
            /* フォントサイズ（すべてここで管理） */
            --font-size-small: 12px;      /* 小さい注釈 */
            --font-size-help: 13px;       /* ヘルプテキスト */
            --font-size-normal: 16px;     /* 標準テキスト */
            --font-size-label: 16px;      /* フォームラベル ★ここを変更すれば全体が変わる */
            --font-size-input: 16px;      /* 入力欄 */
            --font-size-heading: 18px;    /* 見出し */
            
            /* 色 */
            --color-primary: #8b6f47;
            --color-text: #1a1a1a;
            --color-border: #ddd;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
            background: #F5F3F0;
            color: var(--color-text);
            line-height: 1.6;
            font-size: var(--font-size-normal); /* 基準を明示 */
        }

        /* ヘッダー（トップページと統一） */
        header {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 2px 15px rgba(0,0,0,0.06);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.4rem;
            font-weight: bold;
            background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
        }

        /* PC時のナビゲーション（769px以上） */
        @media (min-width: 769px) {
            nav ul {
                display: flex;
                gap: 1.5rem;
                list-style: none;
                align-items: center;
            }

            nav a {
                text-decoration: none;
                color: #4a5568;
                font-weight: 500;
                font-size: 1rem;
                transition: all 0.3s ease;
                position: relative;
                padding-bottom: 3px;
            }

            nav a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
                transition: width 0.3s ease;
            }

            nav a:hover::after {
                width: 100%;
            }

            .nav-cta {
                background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
                color: white !important;
                padding: 0.5rem 1.2rem;
                border-radius: 4px;
                font-weight: 600;
                font-size: 0.9rem;
            }

            .nav-cta::after {
                display: none;
            }
        }


        /* パンくずリスト */
        .breadcrumb {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            font-size: 0.85rem;
        }

        .breadcrumb a {
            color: #8b6f47;
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .breadcrumb span {
            color: #999;
            margin: 0 0.5rem;
        }

        /* 2カラムレイアウト */
        .page-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem 2rem;
        }

        .main-layout {
            display: grid;
            grid-template-columns: 1fr 280px;
            gap: 2rem;
            align-items: start;
        }

        /* メインフォームコンテナ（V1.61のスタイル） */
        .form-container {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
            color: #1a1a1a;
        }

        .intro {
            font-size: 0.95rem;
            color: #000;
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 2px solid #f0f0f0;
        }

        .error-box {
            background: #fee;
            border: 1px solid #fcc;
            color: #c33;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1.5rem;
        }

        .error-box ul {
            margin-left: 1.5rem;
        }

        .form-section {
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .form-section:last-of-type {
            border-bottom: none;
        }

        .section-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section-subtitle {
            font-size: 0.9rem;
            color: #000;
            margin-bottom: 1rem;
        }

        .badge {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 3px;
        }

        .badge-required {
            background: #e74c3c;
            color: white;
        }

        .badge-optional {
            background: #95a5a6;
            color: white;
        }

        .badge-private {
            background: #f39c12;
            color: white;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #000;
            font-size: var(--font-size-label); /* CSS変数を使用 */
        }

        .help-text {
            font-size: var(--font-size-help); /* CSS変数を使用 */
            color: #000;
            margin-top: 0.25rem;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        textarea,
        select {
            width: 100%;
            padding: 0.5rem 0.75rem; /* すべて統一：上下0.5rem、左右0.75rem */
            border: 1px solid var(--color-border);
            border-radius: 4px;
            font-size: var(--font-size-input); /* CSS変数を使用 */
            font-family: inherit;
            transition: border-color 0.3s;
            height: auto;
        }

        input:focus,
        textarea:focus,
        select:focus {
            outline: none;
            border-color: #8b6f47;
        }

        textarea {
            min-height: 200px;
            resize: vertical;
        }

        .radio-group,
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .radio-item,
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* ラジオボタン・チェックボックス内のlabelは特別扱い */
        .radio-item label,
        .checkbox-item label {
            display: inline; /* ブロックではなくインライン */
            font-weight: normal; /* 太字ではなく通常 */
            margin-bottom: 0; /* 下余白なし */
            font-size: var(--font-size-label); /* サイズは統一 */
            cursor: pointer;
        }

        input[type="radio"],
        input[type="checkbox"] {
            width: auto;
        }

        .file-upload-area {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            background: #fafafa;
            cursor: pointer;
            transition: all 0.3s;
        }

        .file-upload-area:hover {
            border-color: #8b6f47;
            background: #f5f5f5;
        }

        .file-upload-area.dragover {
            border-color: #8b6f47;
            background: #f0f0f0;
        }

        .upload-icon {
            font-size: 3rem;
            color: #999;
            margin-bottom: 1rem;
        }

        .upload-text {
            font-size: 1rem;
            color: #000;
            margin-bottom: 0.5rem;
        }

        .upload-hint {
            font-size: 0.85rem;
            color: #999;
        }

        .image-preview-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .image-preview {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #ddd;
        }

        .image-preview img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .image-preview-remove {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-preview-remove:hover {
            background: rgba(231,76,60,0.9);
        }

        .submit-button {
            width: 100%;
            padding: 1rem;
            background: #1a1a1a;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .submit-button:hover {
            background: #000;
            transform: translateY(-2px);
        }

        .submit-button:active {
            transform: translateY(0);
        }

        .back-link {
            display: inline-block;
            margin-top: 1.5rem;
            color: #8b6f47;
            text-decoration: none;
            font-weight: 500;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        .private-info-notice {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 4px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .private-info-notice strong {
            color: #856404;
        }

        /* サイドバー */
        .sidebar {
            position: sticky;
            top: 80px;
        }

        .sidebar-widget {
            background: white;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .sidebar-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #000000;
            margin-bottom: 0.8rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #d4af37;
        }

        .sidebar-banner {
            width: 100%;
            aspect-ratio: 7 / 5;  /* 280:200の比率 */
            overflow: hidden;
            background: linear-gradient(135deg, #f9f8f6 0%, #f0ebe5 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #bbb;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .sidebar-banner img {
            width: 100%;
            height: 100%;
            object-fit: contain;  /* 縦横比を保ちながら全体を表示 */
            display: block;
        }

        .sidebar-list {
            list-style: none;
        }

        .sidebar-list li {
            padding: 0.5rem 0;
            border-bottom: 1px solid #f5f3f0;
        }

        .sidebar-list li:last-child {
            border-bottom: none;
        }

        .sidebar-list a {
            color: #4a5568;
            text-decoration: none;
            font-size: 0.9rem;
            display: block;
            line-height: 1.4;
        }

        .sidebar-list a:hover {
            color: #8b6f47;
        }

        .sidebar-meta {
            font-size: 0.75rem;
            color: #000;
            margin-top: 0.2rem;
        }

        /* ターゲット選択チェックボックス（v1.89L01） */
        .target-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .target-checkbox {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            padding: 0.5rem 0.75rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            transition: all 0.2s;
        }
        
        .target-checkbox:hover {
            background: #f8f9fa;
            border-color: #999;
        }
        
        .target-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .target-badge {
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
        }
        
        .target-description {
            font-size: 0.8rem;
            color: #000;
        }

        /* フッター */
        footer {
            background: #000000;
            color: white;
            padding: 2rem;
            margin-top: 2rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .footer-links a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: 0.9rem;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-copyright {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.5);
        }

        /* レスポンシブ */
        @media (max-width: 1024px) {
            .main-layout {
                grid-template-columns: 1fr;
            }

            .sidebar {
                position: static;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        }

        @media (max-width: 768px) {
            .header-content {
                /* v1.91L39: flex-direction: columnを削除し、横並びを維持 */
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 0.8rem;
                padding: 0.8rem 1rem;
            }

            nav ul {
                gap: 0.8rem;
                flex-wrap: wrap;
                justify-content: center;
            }

            .page-container {
                padding: 1rem;
            }

            .form-container {
                padding: 1.5rem;
            }

            h1 {
                font-size: 1.5rem;
            }

            .radio-group {
                flex-direction: column;
                gap: 0.75rem;
            }

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

        /* ターゲット選択（シンプル版） */
        .target-checkboxes-simple {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem; /* 0.5rem → 0.25rem（4px）にさらに削減 */
            row-gap: 0; /* 行間を0pxに */
        }

        .target-checkbox-simple {
            display: flex;
            align-items: center;
            gap: 0.25rem; /* 0.3rem → 0.25rem（4px）にさらに削減 */
            cursor: pointer;
            padding: 0.2rem; /* 0.25rem → 0.2remに削減 */
            border-radius: 4px;
            transition: background 0.2s;
        }

        .target-checkbox-simple:hover {
            background: #f5f5f5;
        }

        .target-checkbox-simple input[type="checkbox"] {
            width: 13px; /* 18px → 13pxに変更 */
            height: 13px; /* 18px → 13pxに変更 */
            cursor: pointer;
        }

        .target-label {
            font-size: var(--font-size-label); /* CSS変数を使用 */
            font-weight: normal; /* 太字を解除 */
            color: #000;
        }

        /* パスワード入力エリア */
        .password-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .password-input-wrapper input {
            flex: 1;
            padding-right: 50px;
        }

        .password-toggle {
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 2rem;
            padding: 5px 10px;
            line-height: 1;
            color: #666;
            transition: color 0.2s;
        }

        .password-toggle:hover {
            color: #000;
        }

        .toggle-icon {
            display: inline-block;
        }

        .password-match-message {
            margin-top: 0.5rem;
            font-weight: bold;
        }

        .password-match-message.match {
            color: #28a745;
        }

        .password-match-message.mismatch {
            color: #dc3545;
        }

        /* アコーディオン（折りたたみ）機能 */
        .collapsible-section {
            margin-bottom: 1.5rem;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 1rem;
            background: #f8f8f8;
            border-radius: 4px;
            transition: background 0.3s;
        }

        .section-header:hover {
            background: #efefef;
        }

        .section-header-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .toggle-icon-wrapper {
            font-size: 1.2rem;
            transition: transform 0.3s;
        }

        .toggle-icon-wrapper.open {
            transform: rotate(90deg);
        }

        .section-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .section-content.open {
            max-height: 2000px; /* 十分大きな値 */
            padding-top: 1rem;
        }

        /* 「詳細情報を追加」ボタン */
        .expand-button {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: #f0f0f0;
            color: #333;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.95rem;
            transition: all 0.3s;
            margin-bottom: 1rem;
        }

        .expand-button:hover {
            background: #e0e0e0;
        }

        .expand-button.hidden {
            display: none;
        }