@charset "UTF-8";

/* =========================================
SHUTTLES Website Generator - 共通スタイル
========================================= */

/* 基本フォント設定（全体をゴシック体に統一） */
body, h1, h2, h3, p, a, span, div { 
    font-family: 'Noto Sans JP', sans-serif; 
}

/* =========================================
UIコンポーネント
========================================= */

/* カスタムスクロールバー (プレビューエリア等) */
.custom-scrollbar::-webkit-scrollbar { 
    width: 8px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    border-radius: 4px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 4px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* トップページ用：背景パターン */
.hero-pattern {
    background-color: #ffffff;
    background-image: radial-gradient(#f97316 0.5px, transparent 0.5px), radial-gradient(#f97316 0.5px, #ffffff 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-opacity: 0.05;
}

/* おまかせコース用：フォームセクションの装飾 */
.form-section { 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 1.5rem; 
    padding: 2rem; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
}

/* アコーディオン (details) のデフォルト三角アイコンを非表示 (Safari対応) */
details > summary::-webkit-details-marker { 
    display: none; 
}

/* =========================================
フォーム要素の共通アクション
========================================= */

/* 入力欄のフォーカス時のオレンジ色の枠線と影 */
input, textarea, select { 
    transition: all 0.2s ease-in-out; 
}
input:focus, textarea:focus, select:focus { 
    border-color: #f97316 !important; 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); 
}

/* DIYコース用：ファイルアップロードボタンのデザイン */
input[type=file]::file-selector-button {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    color: #374151;
    cursor: pointer;
    margin-right: 8px;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}
input[type=file]::file-selector-button:hover { 
    background-color: #e5e7eb; 
}