/* フォントの統一と全体的なスタイル */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* モバイル用の警告 */
.mobile-warning-content {
    display: none;
    background-color: #ffdddd;
    color: #d9534f;
    text-align: center;
    padding: 15px 10px;
    margin-bottom: 20px; /* 下の余白を確保 */
    font-size: 14px;
    border: 1px solid #d9534f;
    border-radius: 5px;
}

/* モバイル用のスタイル */
@media (max-width: 480px) {
    .mobile-warning-content {
        display: block;
    }

    .desktop-content {
        display: none; /* デスクトップ用コンテンツを非表示 */
    }
}

/* 全体のラッパーをフレックスボックスで配置 */
#typing-game-wrapper {
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: flex-start; 
    margin: 7px auto;
    max-width: 800px; /* 全体の最大幅を設定 */
    position: relative; 
}

/* コンテナのスタイル */
#typing-game-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    border: 3px solid #0089c0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transform-origin: top center;
    flex-grow: 1;
    border-radius: 8px;
}

/* 外部リンクボタンと戻るボタンの共通スタイル */
.typing-game-button {
    display: inline-block;
    width: 21%;
    min-width: 80px; /* ボタンの最小幅を80pxに設定 */
    height: 35px;
    font-size: clamp(12px, 1.5vw, 15px); /* フォントサイズをウィンドウ幅に応じて調整 */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-decoration: none;
    line-height: 35px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #0089c0, #005f8b);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    white-space: nowrap; /* テキストの折り返しを防止 */
    overflow: hidden; /* はみ出したテキストを非表示 */
    text-overflow: ellipsis; /* はみ出した部分を省略記号で表示 */
    padding: 0 10px; /* 横方向の余白を追加 */
    margin-bottom: 5px;
    margin-top: 5px;
    box-sizing: border-box; /* パディングを幅に含める */
}

/* ホバー時のスタイル */
.typing-game-button:hover {
    background: linear-gradient(135deg, #0078a8, #004d66); /* ホバー時の色変更 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* ホバー時の影を強調 */
    transform: translateY(-2px); /* 浮き上がるアニメーション */
}

/* アクティブ時のスタイル */
.typing-game-button:active {
    background: linear-gradient(135deg, #005f8b, #003a5b); /* アクティブ時の色変更 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* アクティブ時は影を小さく */
    transform: translateY(2px); /* 押し込まれるアニメーション */
}

/* ボタンをフレックスボックスで整列 */
#status-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* タイトルのスタイル */
#typing-game-container h1 {
    width: 90%;
    font-size: 25px;
    margin: 0 auto;
    color: #0089c0;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #0089c0;
    font-weight: bold;
}


/* スタートボタンのスタイル */
#command-typing_start {
    display: none;
}

/* ステータスバーのスタイル */
#status-bar {
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    align-items: center;
    margin: 13px auto;
    font-size: 19px;
    width: 90%;
    height: 10px;
    max-width: 800px;
				padding-bottom: 10px;
    padding-top: 5px;
}

#status-bar div {
    flex: 1;
    text-align: center;
}

#mistakesCount{
    position: relative;
    left: 35px;
}

#timer {
    position: relative;
    left: 16px;
}

#mistakesCount, #timer, #questionProgress {
    font-family: "Verdana", "Trebuchet MS", Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* ソフトな影を追加 */
    letter-spacing: 0.5px;
}

#status-bar button#returnButton:hover {
    background-color: #0078a8;
}

#status-bar button#externalLinkButton:hover {
    background-color: #0078a8;
}

#questionProgress {
    text-align: right;
}

#typingSpeed{
    display: none;
}

/* 問題部分のデザイン */
#typing-game-container #question {
			font-size: 20px;
			color: #fff;                /* 文字色を白に変更 */
			background-color: #333;      /* 背景色を灰色に変更 */
			padding: 5px;
			border: 2px solid #aaa;
			margin: 0 auto;
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
			width: 480px;
			font-family: auto;
   font-weight: bold;
	}
  

/* メディアコンテナのスタイル */
#mediaContainer {
    position: relative;
    width: 480px; 
    height: 270px; 
    margin: 18px auto 0;
    text-align: center; 
    overflow: hidden; 
}

#typingGameImage, #correctVideo {
    position: relative; /* 親要素に従う */
    width: 100%; /* コンテナの幅に合わせる */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像を枠内に収める */
    display: block; /* 確実に表示されるように */
}

#typing-game-container #miss {
    position: absolute;
    left: 50%;
    transform: translateX(-70%);
    text-align: center;
    color: #FD786C;
    font-weight: bold;
    font-size: 24px;
    z-index: 10;
}

#startMessage {
    position: absolute;
    bottom: 5%; /* 画像の下から1/4の位置に配置（高さの25%） */
    left: 50%;
    transform: translateX(-50%); /* 横方向に中央揃え */
    font-size: 35px; /* フォントサイズの調整 */
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字に影を付けて視認性を高める */
    display: block;
    width: 100%; /* 文字が一行に収まるようにする */
    text-align: center; /* 中央揃え */
    white-space: nowrap; /* 文字を折り返さない */
}


/* シェイクアニメーションの定義 */
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

/* ミスが発生したときのスタイル */
#typing-game-container #miss.active {
    animation: shake 0.5s; /* シェイクアニメーションを適用 */
}

/* inputModeSelectionWrapperをフレックスボックスに設定 */
#inputModeSelectionWrapper {
    position: relative;
    width: 85%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0 10px;
    box-sizing: border-box;
}

/* トグル全体のスタイル */
.modern-toggle {
    margin-left: auto; /* 親要素の右端に配置 */
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333;
    gap: 10px;
}

/* チェックボックスを非表示 */
.modern-toggle input[type="checkbox"] {
    display: none;
}

/* スライダーのスタイル */
.modern-toggle .slider {
    position: relative;
    width: 50px;
    height: 25px;
    background: linear-gradient(to right, #ccc, #eee); /* グラデーション追加 */
    border-radius: 25px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    margin-right: -3px;
    margin-top: -2px;
}

/* スライダーのハンドル部分 */
.modern-toggle .slider:before {
    content: '';
    position: absolute;
    width: 19px;
    height: 19px;
    background: linear-gradient(to bottom, #fff, #ddd); /* ハンドルにグラデーション追加 */
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(255, 255, 255, 0.7);
}

/* チェックされたときのスライダー */
.modern-toggle input[type="checkbox"]:checked + .slider {
    background: linear-gradient(to right, #0089c0, #005f8b); /* チェック時のグラデーション */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* チェックされたときのハンドル */
.modern-toggle input[type="checkbox"]:checked + .slider:before {
    transform: translateX(25px);
    background: linear-gradient(to bottom, #0078a8, #004d66); /* チェック時のハンドルグラデーション */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.6);
}

/* ラベルテキストのスタイル */
.modern-toggle .label-text {
    font-weight: bold;
    color: #333;
}

/* スコア表示のデザイン */
#typing-game-container #score {
    font-size: 20px;
    color: #333;
    padding: 10px;
    background-color: #eef;
    border-radius: 8px;
}

/* キーボードのスタイル */
#keyboard-container {
    display: block;
    width: 78%;
    margin: 0 auto;
    margin-top: 6px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
    left: -25px;
}

.key-row {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.key {
    display: inline-block;
    width: 45px;
    height: 25px;
    line-height: 25px;
    margin: 1px;
    background-color: #f0f4f8;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

.key.highlight {
    background-color: #FD786C;
    color: #fff;
}

.key.enter {
    position: absolute;
    width: 50px;
    height: 58px;
    margin: 2px;
    background-color: #f0f4f8;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    color: #333;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 30px;
    right: -53px;
    transition: background-color 0.3s, color 0.3s; /* ホバー時のトランジション */
}

/* ハイライト時のスタイル */
.key.enter.highlight {
    background-color: #FD786C;
    color: #fff;
}

/* シフトキーは残りのスペースを占有する */
.key.shift {
    width: 60px;
}

.key.space {
    width: 90px; /* スペースキーの幅は固定 */
}

.key-row.row-3 {
    margin-left: 20px; /* Aの位置をQと同じ列に揃える */
}

.highlight {
    background-color: #FD786C; /* ハイライト時の色 */
    color: #fff; /* ハイライト時の文字色 */
}

.key.enter.highlight {
    background-color: #FD786C;  /* ハイライト時の背景色 */
    color: #fff;  /* ハイライト時の文字色 */
}

.finger.highlight {
    background-color: #FD786C;  /* ハイライト時の背景色 */
    color: #fff;  /* ハイライト時の文字色 */
}

/* フィンガーディスプレイのスタイル */
.finger-display {
    display: flex;
    justify-content: center;
    margin-top: -30px;
}

/* 各指のスタイル */
.finger {
    display: inline-block;
    width: 35px;
    height: 50px;
    margin: 0 5px;
    background-color: #f0f4f8;
    border-radius: 20px 20px 0 0;
    border: 2px solid #ccc;
    position: relative;
}

.finger.highlight {
    background-color: #FD786C;
    border-color: #FD786C;
}

.finger.thumb {
    height: 20px;  /* 親指は標準の1/3の高さ */
    top: 30px; 
}

.finger.pinky {
    height: 35px;  /* 小指は標準の1/2の高さ */
    top: 15px; 
}

/* 手の間にスペースを追加 */
.finger-5 {
    margin-right: 70px;  /* 左手の小指と右手の親指の間にスペースを挿入 */
}
.finger-6 {
    margin-left: 70px;  /* 左手の小指と右手の親指の間にスペースを挿入 */
}

/* タイピング速度表示エリアのコンテナ */
#typingSpeedContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    margin: 20px auto;
    padding: 20px;
    background: linear-gradient(135deg, #fafdff, #e2f0fd); /* 背景にグラデーションを追加 */
    border: 1px solid #ccc; /* 枠線の色と太さを変更 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* 左半分のテキストエリア */
#typingSpeedText {
    width: 50%;
    text-align: left;
    font-family: "Verdana", "Trebuchet MS", Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* スコアのスタイル */
#typingSpeedText .score {
    font-size: 36px;
    font-weight: bold;
    color: #0089c0; /* アクセントカラーを使用 */
    margin-bottom: 10px;
}

/* 補足情報のスタイル（タイピング速度と正確性） */
#typingSpeedText .supplementary-info {
    font-size: 18px;
    color: #555;
    margin-bottom: 5px;
}

/* 次のランクまでのポイントのスタイル */
#typingSpeedText .next-rank {
    font-size: 20px;
    font-weight: bold;
    color: #FD786C; /* 別のアクセントカラーを使用 */
    margin-top: 15px;
}

/* スコア画像コンテナ */
#scoreImageContainer {
    width: 45%;
    margin-left: 40px;
    margin-right: 5px;
    text-align: center;
}

/* スコア画像 */
#scoreImage {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 画像にも影を追加 */
    transition: transform 0.3s, box-shadow 0.3s;
}

#scoreImage:hover {
    transform: scale(1.05); /* ホバー時に拡大する効果 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* ホバー時に影を強調 */
}

/* questionsListのスタイル */
#questionsList {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 3px solid #0089c0;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    width: 85%;
    max-width: 800px;
    margin: 20px auto;
    font-family: "Verdana", "Trebuchet MS", Arial, sans-serif;
}

/* タイトルのスタイル */
#questionsList h2 {
    font-size: 24px;
    font-weight: bold;
    color: #0089c0;
    text-align: center;
    margin-bottom: 20px;
}

/* 各問題カードのスタイル */
.question-card {
    margin-bottom: 14px;
    padding: 13px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 8px;
}

/* 問題番号のスタイル */
.question-number {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* コマンド部分のスタイル */
.question-content .command {
    font-size: 16px;
    color: #333;
    background-color: #eef;
    padding: 10px;
    border-radius: 5px;
    word-break: break-word; /* 長いコマンドを折り返す */
    line-height: 1.4;
}

/* 解説部分のスタイル */
.question-content .explanation {
    font-size: 15px;
    color: #555;
    margin-top: 10px;
    line-height: 1.4;
}

/* スマホ対応*/
@media (max-width: 768px) {
#typing-game-container {
    width: 100%;
    padding: 10px;  /* スマホで余裕のあるパディング */
    transform: none;
}

.typing-game-button {
    width: 20%; /* ボタンの幅を広げる */
    padding: 0;
    font-size: clamp(9px, 2vw, 12px);
}

#typing-game-container h1 {
    font-size: 20px;
}

#status-bar {
    font-size: 12px;
    gap: 2px;
}

#status-bar button#returnButton {
    font-size: 12px;
    padding: 1px 3px;
    margin: 0 5px;
}

#status-bar button#externalLinkButton {
    font-size: 12px;
    padding: 1px 3px;
    margin: 0 0px;
}

#mistakesCount{
    position: relative;
    left: 0;
}

#timer {
    position: relative;
    left: 0;
}

#mistakesCount, #timer, #questionProgress {
    font-size: 10px;
}

#typing-game-container #question {
    width: 85%;
    font-size: 14px;
    padding: 5px;
}

#typing-game-container #miss {
    font-size: 14px;
}

#inputModeSelectionWrapper {
    width: 85%;
    max-width: 100%;
}

.modern-toggle {
    font-size: 12px; /* 文字サイズを縮小 */
}

.modern-toggle .slider {
    width: 35px; /* スライダーの幅を縮小 */
    height: 18px; /* スライダーの高さを縮小 */
    margin-right: -7px;
    margin-top: -3px;
}

.modern-toggle .slider:before {
    width: 14px; /* ハンドルの幅を縮小 */
    height: 14px; /* ハンドルの高さを縮小 */
    top: 2px;
    left: 2px;
    transform: translateX(16px); /* チェック時の移動量も調整 */
}

.modern-toggle input[type="checkbox"]:checked + .slider:before {
    transform: translateX(16px);
}

#typing-game-container #score {
    font-size: 14px;
}

#mediaContainer {
    max-width: 100%;
    padding-top: 56.25%;
}

#keyboard-container {
    width: 78%;
    left: -12.5px;
}

.key {
    width: 25px;   /* キーを小さくする */
    height: 20px;
    line-height: 20px;
    font-size: 8px;  /* フォントサイズも小さく */
    margin: 0px;
}

.key.shift {
    width: 35px;  /* シフトキーやエンターキーを縦長に */
}

.key.enter {
    position: absolute; 
    height: 46px; 
    line-height: 46px;
    width: 25px;
    vertical-align: top;
    top: 22px; /* 2行目の上に配置 */
    right: -27px;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.finger-display {
    margin-top: -20px;
}

.finger{
    height: 30px;
    width: 20px;
    margin: 0px 2px;
}

.finger-5 {
    margin-right: 50px;  /* 左手の小指と右手の親指の間にスペースを挿入 */
}

.finger-6 {
    margin-left: 50px;  /* 左手の小指と右手の親指の間にスペースを挿入 */
}

.finger.thumb {
    height: 15px;
    top: 15px; 
}

.finger.pinky {
    height: 25px;
    top: 5px;
}
}
}