/* ==========================================================================
   共通スタイル (index.html, master.html共通)
   フロントエンド最適化 Phase 2: インラインスタイルの外部化
   ========================================================================== */

/* 日本語フォント設定 */
* {
    font-family: 'Noto Sans CJK JP', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'Yu Gothic', sans-serif !important;
}

/* Alpine.js x-cloak対応 - 初期化前の要素を非表示 */
[x-cloak] {
    display: none !important;
}

/* ==========================================================================
   背景画像設定
   ========================================================================== */

body {
    background-image: url('/images/back.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}

/* 半透明オーバーレイでコンテンツを読みやすく */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: -1;
}

/* 検索フォーム・タブ・検索結果の半透明背景 */
.search-form-bg {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

/* ==========================================================================
   Tom Select カスタマイズ - フラットデザイン
   ========================================================================== */

.ts-control,
.ts-control input {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

/* Tom Select wrapper - 外側のborderを削除、幅固定 */
.ts-wrapper {
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.ts-wrapper .ts-control {
    border: 1px solid #D0D0D0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
}

.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control {
    border: 1px solid #D0D0D0 !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

/* Tom Select入力フィールド内のinput */
.ts-wrapper.single .ts-control input {
    height: 28px !important;
}

/* Tom Select dropdown オプション */
.ts-dropdown .option {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

/* Tom Select dropdown スタイル */
.ts-dropdown {
    border: 1px solid #D0D0D0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Tom Select optgroup-header カスタムスタイル */
.ts-dropdown .optgroup-header {
    background-color: #e6f7f5 !important;
    color: #005a4b !important;
    border-left: 4px solid #00af93 !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    cursor: default;
}

/* Tom Select option hover */
.ts-dropdown .option:hover {
    background-color: #f5f5f5 !important;
}

/* Tom Select 選択済みoption */
.ts-dropdown .option.active {
    background-color: #e0f2f1 !important;
    color: #00796b !important;
}