/**
 * 言語切替スイッチ（Language Switcher）
 * Version: 5.23.0
 * Created: 2026-10-11
 * 
 * 目的: インバウンド対応強化、多言語サイトへの導線
 * 機能: ヘッダー右上に言語選択メニュー
 */

/* ========================================
   言語切替コンテナ
   ======================================== */

.language-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 16px;
}

/* ========================================
   言語切替ボタン
   ======================================== */

.language-switcher-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #CBD5E0;
    border-radius: 6px;
    color: #2C7A7B;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.language-switcher-button:hover {
    background: rgba(79, 209, 197, 0.1);
    border-color: #4FD1C5;
    color: #234E52;
}

.language-switcher-button:focus {
    outline: 2px solid #4FD1C5;
    outline-offset: 2px;
}

/* 地球アイコン */
.language-switcher-icon {
    font-size: 1rem;
    color: #2C7A7B;
}

/* 現在の言語表示 */
.language-switcher-current {
    font-weight: 600;
}

/* ドロップダウンアイコン */
.language-switcher-dropdown-icon {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.language-switcher-button.active .language-switcher-dropdown-icon {
    transform: rotate(180deg);
}

/* ========================================
   言語メニュー（ドロップダウン）
   ======================================== */

.language-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: hidden;
}

.language-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ========================================
   言語メニュー項目
   ======================================== */

.language-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #2D3748;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid #F7FAFC;
    transition: all 0.2s ease;
}

.language-menu-item:last-child {
    border-bottom: none;
}

.language-menu-item:hover {
    background: linear-gradient(90deg, rgba(79, 209, 197, 0.1) 0%, transparent 100%);
    color: #2C7A7B;
}

.language-menu-item:focus {
    background: rgba(79, 209, 197, 0.15);
    outline: none;
}

/* アクティブな言語 */
.language-menu-item.active {
    background: linear-gradient(135deg, #E6FFFA 0%, #B2F5EA 100%);
    color: #2C7A7B;
    font-weight: 600;
    pointer-events: none;
}

/* 言語フラグ（絵文字） */
.language-flag {
    font-size: 1.2rem;
}

/* 言語名 */
.language-name {
    flex: 1;
}

/* チェックマーク（アクティブ時） */
.language-check {
    color: #2C7A7B;
    font-size: 0.9rem;
}

/* ========================================
   ヘッダーレイアウト調整
   ======================================== */

.header-container {
    position: relative; /* ドロップダウンの基準 */
}

/* デスクトップナビゲーションとの統合 */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

/* タブレット */
@media (max-width: 768px) {
    .language-switcher {
        margin-right: 12px;
    }
    
    .language-switcher-button {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
    
    .language-switcher-icon {
        font-size: 0.95rem;
    }
    
    .language-menu {
        min-width: 160px;
    }
    
    .language-menu-item {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* スマートフォン */
@media (max-width: 480px) {
    .language-switcher {
        margin-right: 8px;
    }
    
    /* シンプルなアイコンのみ表示 */
    .language-switcher-button {
        padding: 6px;
        min-width: 36px;
        justify-content: center;
    }
    
    .language-switcher-current,
    .language-switcher-dropdown-icon {
        display: none; /* モバイルでは非表示 */
    }
    
    .language-switcher-icon {
        font-size: 1.1rem;
    }
    
    .language-menu {
        min-width: 140px;
        right: -8px; /* 位置調整 */
    }
    
    .language-menu-item {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .language-flag {
        font-size: 1.1rem;
    }
}

/* ========================================
   アニメーション
   ======================================== */

@keyframes languageMenuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.language-menu.show {
    animation: languageMenuSlideIn 0.3s ease;
}

/* ========================================
   アクセシビリティ: モーション軽減設定
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .language-switcher-button,
    .language-menu,
    .language-menu-item {
        transition: none;
        animation: none;
    }
    
    .language-switcher-dropdown-icon {
        transition: none;
    }
}

/* ========================================
   ダークモード対応（将来用）
   ======================================== */

@media (prefers-color-scheme: dark) {
    .language-switcher-button {
        border-color: #4A5568;
        color: #4FD1C5;
    }
    
    .language-switcher-button:hover {
        background: rgba(79, 209, 197, 0.2);
        border-color: #4FD1C5;
        color: #81E6D9;
    }
    
    .language-menu {
        background: #2D3748;
        border-color: #4A5568;
    }
    
    .language-menu-item {
        color: #E2E8F0;
        border-bottom-color: #4A5568;
    }
    
    .language-menu-item:hover {
        background: rgba(79, 209, 197, 0.2);
        color: #81E6D9;
    }
    
    .language-menu-item.active {
        background: rgba(79, 209, 197, 0.3);
        color: #81E6D9;
    }
}