/* ヘッダー部分: ページの上部に固定されるエリア */
.header {
    position: fixed; /* スクロールしてもヘッダーが画面上部に固定される */
    top: 0; /* 画面の上端に配置 */
    left: 0; /* 画面の左端に配置 */
    width: 100%; /* 横幅を画面全体に設定 */
    background: white; /* 背景色を白に設定 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 少し影をつけて立体的に見せる */
    display: flex; /* 中身を横並びにする */
    justify-content: space-between; /* 左右に要素を配置 */
    align-items: center; /* 縦方向を中央揃えにする */
    padding: 10px 20px; /* 内側に余白をつける */
    z-index: 1000; /* 他の要素より前面に表示されるようにする */
}

/* ヘッダー内のロゴ */
.header .logo {
    height: 40px; /* ロゴの高さを40pxに設定 */
}

/* ヘッダー内のログアウトボタン */
.header .logout {
    text-decoration: none; /* 下線を消す */
    color: #0056b3; /* 文字色を濃い青に設定 */
    font-weight: bold; /* 太字にする */
    background: #e0f7ff; /* 背景色を薄い青に設定 */
    padding: 5px 10px; /* 内側に余白をつける */
    border-radius: 8px; /* 角を丸くする */
    margin-right: 20px; /* 右端に余白を追加 */
}

/* メインコンテンツ部分: 動画のグループ表示 */
/* .content { */
.container {
    margin-top: 80px; /* ヘッダーの下にスペースを確保 */
    padding: 20px; /* 内側に余白を追加 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    justify-content: center; /* 縦方向も中央揃え */
    padding-bottom: 40px; /* フッター分のスペース確保 */
}

/* グループの外枠デザイン */
.group {
    margin-bottom: 40px; /* 下に余白を追加 */
    background: #f0f0f0; /* 背景色を薄い灰色に設定 */
    padding: 20px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    text-align: center; /* 文字を中央揃えにする */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 少し影をつけて立体的にする */
    width: 100%;
    max-width: 800px; /* 最大幅を800pxに設定 */
}

/* グループタイトルのデザイン */
.group h2 {
    font-size: 1.5rem; /* フォントサイズを大きく設定 */
    margin-bottom: 20px; /* 下にスペースを追加 */
}

/* サブグループのデザイン */
.sub-group {
    background: #ffffff; /* 背景色を白に設定 */
    margin: 20px 0; /* 上下に余白を追加 */
    padding: 15px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    text-align: center; /* 文字を中央揃えにする */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 少し影をつける */
}

/* サブグループタイトル */
.sub-group h3 {
    font-size: 1.2rem; /* フォントサイズを中くらいに設定 */
    margin-bottom: 10px; /* 下に少しスペースを追加 */
}

/* 動画カード部分のデザイン */
.video-card {
    display: block; /* ボックスとして表示 */
    width: 50%; /* 横幅を親要素の半分にする */
    /*background: #f9f9f9;*/ /* 背景色を薄い灰色に設定 */
    background: #000000; /* 背景色を黒に設定 */
    padding: 15px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    text-align: center; /* 文字を中央揃えにする */
    text-decoration: none; /* 下線を消す */
    /*color: #333;*/ /* 文字色を濃い灰色に設定 */
    color: white;/* 文字色を白に設定 */
    transition: background 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    margin: 10px auto; /* 各カードの間に余白を追加し、中央揃え */
}

.video-card:hover {
    /*background: #e0e0e0;*/ /* 背景色を少し濃くする */
    background: #d2232a; /* 背景色を赤にする */
    transform: translateY(-2px); /* 要素を少し浮かせる */
}





/* 動画カード部分のデザイン */
.video-card-not-found {
    display: block; /* ボックスとして表示 */
    width: 50%; /* 横幅を親要素の半分にする */
    background: #a9a9a9; /* 背景色を灰色に設定 */
    padding: 15px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    text-align: center; /* 文字を中央揃えにする */
    text-decoration: none; /* 下線を消す */
    color: #333; /* 文字色を濃い灰色に設定 */
    transition: background 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    margin: 10px auto; /* 各カードの間に余白を追加し、中央揃え */
}

.video-card-not-found:hover {
    background: #e0e0e0; /* 背景色を少し濃くする */
    transform: translateY(-2px); /* 要素を少し浮かせる */
}






/* メニューカード部分のデザイン */
.menu-card {
    display: block; /* ボックスとして表示 */
    width: 50%; /* 横幅を親要素の半分にする */
    /*background: #f9f9f9;*/ /* 背景色を薄い灰色に設定 */
    background: #000000; /* 背景色を黒に設定 */
    padding: 15px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    text-align: center; /* 文字を中央揃えにする */
    text-decoration: none; /* 下線を消す */
    /*color: #333;*/ /* 文字色を濃い灰色に設定 */
    color: white;/* 文字色を白に設定 */
    transition: background 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    margin: 10px auto; /* 各カードの間に余白を追加し、中央揃え */
}

.menu-card:hover {
    /*background: #e0e0e0;*/ /* 背景色を少し濃くする */
    background: #d2232a; /* 背景色を赤にする */
    transform: translateY(-2px); /* 要素を少し浮かせる */
}



/* 動画再生時のモーダル表示部分 */
.modal {
    display: none; /* デフォルトでは非表示 */
    position: fixed; /* 画面上に固定 */
    top: 0; /* 上端に配置 */
    left: 0; /* 左端に配置 */
    width: 100%; /* 横幅を画面全体に設定 */
    height: 100%; /* 高さを画面全体に設定 */
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒い背景 */
    justify-content: center; /* 中央揃えにする */
    align-items: center; /* 縦方向も中央揃え */
    z-index: 2000; /* 他の要素の上に表示 */
}

/* モーダル内のコンテンツ */
.modal-content {
    background: white; /* モーダルの背景を白に設定 */
    width: 80%; /* モーダル幅を画面の80%に設定 */
    max-width: 800px; /* モーダルの最大幅を800pxに設定 */
    padding: 20px; /* 内側に余白を追加 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 影をつける */
    position: relative; /* ボタン位置調整のための設定 */
    display: flex; /* 動画と閉じるボタンを整列 */
    flex-direction: column; /* 縦方向に配置 */
    align-items: center; /* コンテンツを中央揃え */
}

/* モーダル内の動画プレイヤー */
.modal-content video {
    width: 100%;
    border-radius: 8px;
    outline: none;
    controlslist: nodownload; /* ダウンロードオプションを無効化 */
    margin-bottom: 15px; /* 閉じるボタンとの間にスペースを追加 */
}

/* モーダルを閉じるボタン */
.close-modal {
    position: relative;
    background: #5c5cff; /* 赤い背景色 */
    color: white; /* ボタンの文字色 */
    border: none; /* 枠線を消す */
    border-radius: 8px; /* 四角い形を丸くする */
    width: 80px; /* ボタンの幅を広げる */
    height: 40px; /* ボタンの高さを設定 */
    cursor: pointer; /* マウスオーバー時にカーソルを変更 */
    font-size: 1rem; /* フォントサイズ */
    text-align: center; /* テキストを中央揃え */
    line-height: 40px; /* ボタン内のテキストを垂直方向に中央揃え */
    margin-top: 10px; /* 動画との間にスペースを追加 */
}

.close-modal:hover {
    background: #4444e0; /* ホバー時の色を少し濃く */
}

/* フッター部分: ページの最下部に固定 */
.footer {
    position: fixed; /* フッターを画面の最下部に固定 */
    /* position: absolute; */ /* フッターを画面の最下部に固定 */
    bottom: 0; /* 画面の下端に配置 */
    left: 0; /* 左端に配置 */
    width: 100%; /* フッターの横幅を画面全体に設定 */
    height: 50px; /* フッターの高さを設定 */
    background: black; /* 背景色を黒に設定 */
    color: white; /* 文字色を白に設定 */
    display: flex; /* フレックスボックスで配置 */
    justify-content: space-between; /* 左右に要素を配置 */
    align-items: center; /* フッター内のアイテムを上下中央揃え */
    padding: 0 20px; /* 左右に余白を追加 */
    z-index: 1000; /* 他の要素より前面に表示 */
}

/* フッター内の著作権表示部分 */
.footer .copyright {
    font-size: 0.9rem; /* フォントサイズを小さめに設定 */
    margin-left: 10px; /* 左端に余白を追加 */
}

/* フッター内のロゴ部分 */
.footer .footer-logo {
    height: 30px; /* ロゴの高さを30pxに設定 */
    width: auto; /* ロゴの幅を自動調整 */
    margin-right: 30px; /* ロゴを少し左に寄せることでスクロールバーと重ならないように調整 */
}

/* レスポンシブ対応: 幅が720px以下の場合 */
@media (max-width: 720px) {

  /* フッター内の著作権表示部分 */
  	.footer .copyright {
      font-size: 0.6rem; /* フォントサイズを小さめに設定 */
      margin-left: 10px; /* 左端に余白を追加 */
  }
  
  /* フッター内のロゴ部分 */
  .footer .footer-logo {
      height: 20px; /* ロゴの高さを30pxに設定 */
      width: auto; /* ロゴの幅を自動調整 */
      margin-right: 30px; /* ロゴを少し左に寄せることでスクロールバーと重ならないように調整 */
}



    .footer .footer-logo {
        height: 20px; /* ロゴの高さを小さくして、コピーライトと重ならないようにする */
    }

    .footer span {
        font-size: 0.8rem; /* コピーライト文字を少し小さくして全体のバランスを保つ */
    }
}


/* ログイン情報を囲むデザイン */
.swpm-login-widget-form {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f9f9f9; /* 背景色を薄い灰色に設定 */
}

.swpm-login-widget-form form {
    border: 2px solid #d2232a; /* 赤い枠線を設定 */
    border-radius: 8px; /* 角を丸くする */
    padding: 20px; /* 内側に余白を追加 */
    background: white; /* 背景色を白に設定 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 少し影をつける */
    text-align: center; /* 文字を中央揃え */
    max-width: 400px;
    width: 90%;
}

.swpm-login-widget-form h1 {
    margin-bottom: 20px; /* フォームと見出しの間に余白を追加 */
    font-size: 1.5rem; /* 見出しのフォントサイズを設定 */
    color: #333; /* 文字色を濃い灰色に設定 */
}

/* フォーム全体 */
form {
    border: 2px solid red; /* フォーム全体を囲む赤い枠線 */
    border-radius: 8px; /* 枠線の角を丸くする */
    padding: 20px; /* フォーム内部の余白 */
    background: white; /* 背景色を白に設定 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 少し影を付けて立体感を追加 */
    text-align: center; /* 中身の文字を中央揃え */
    width: 90%; /* 横幅を画面の90%に設定 */
    max-width: 400px; /* フォームの最大横幅を400pxに制限 */
}


/* パスワードリセット情報を囲むデザイン */
.swpm-pw-reset-widget-form {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f9f9f9; /* 背景色を薄い灰色に設定 */
}

.sswpm-pw-reset-widget-form form {
    border: 2px solid #d2232a; /* 赤い枠線を設定 */
    border-radius: 8px; /* 角を丸くする */
    padding: 20px; /* 内側に余白を追加 */
    background: white; /* 背景色を白に設定 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 少し影をつける */
    text-align: center; /* 文字を中央揃え */
    max-width: 400px;
    width: 90%;
}

.swpm-pw-reset-widget-form h1 {
    margin-bottom: 20px; /* フォームと見出しの間に余白を追加 */
    font-size: 1.5rem; /* 見出しのフォントサイズを設定 */
    color: #333; /* 文字色を濃い灰色に設定 */
}

/* フォーム全体 */
form {
    border: 2px solid red; /* フォーム全体を囲む赤い枠線 */
    border-radius: 8px; /* 枠線の角を丸くする */
    padding: 20px; /* フォーム内部の余白 */
    background: white; /* 背景色を白に設定 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 少し影を付けて立体感を追加 */
    text-align: center; /* 中身の文字を中央揃え */
    width: 90%; /* 横幅を画面の90%に設定 */
    max-width: 400px; /* フォームの最大横幅を400pxに制限 */
}




/* フォームの見出し */
form h1 {
    margin-bottom: 20px; /* 見出しとフォーム内容の間に余白を追加 */
    font-size: 1.5rem; /* 見出しの文字サイズを設定 */
    color: #333; /* 文字色を濃いグレーに設定 */
}

/* フォーム内の入力フィールドとラベル */
.form-group {
    display: flex; /* ラベルと入力欄を横並びに配置 */
    justify-content: flex-start; /* 左揃えで配置 */
    align-items: center; /* ラベルと入力欄を垂直方向に中央揃え */
    margin-bottom: 15px; /* 各フィールド間に余白を追加 */
}

.form-group label {
    min-width: 120px; /* ラベルの最小横幅を設定 */
    text-align: right; /* ラベルの文字を右揃えに設定 */
    margin-right: 10px; /* ラベルと入力欄の間に余白を追加 */
    font-weight: bold; /* ラベルの文字を太字に設定 */
    white-space: nowrap; /* ラベルが複数行に折り返されないように設定 */
}

.form-group input {
    flex: 1; /* 入力欄の幅をラベル以外のスペースに合わせて調整 */
    padding: 10px; /* 入力欄内に余白を追加 */
    border: 1px solid #ccc; /* 入力欄の枠線を薄い灰色に設定 */
    border-radius: 5px; /* 枠線の角を丸くする */
    box-sizing: border-box; /* パディングや枠線を含めて幅を計算 */
    max-width: 300px; /* 入力欄の最大幅を設定 */
}

/* ログインボタン */
.swpm-login-form-submit {
    width: 100%; /* ボタンの幅をフォーム全体に合わせる */
    padding: 10px; /* ボタン内の上下左右に余白を追加 */
    background: #000; /* ボタンの背景色を黒に設定 */
    color: white; /* ボタンの文字色を白に設定 */
    border: none; /* ボタンの枠線を消す */
    border-radius: 5px; /* ボタンの角を丸くする */
    font-size: 1rem; /* ボタンの文字サイズを設定 */
    cursor: pointer; /* マウスを乗せたときに指カーソルを表示 */
    transition: background 0.3s ease; /* ホバー時の背景色変化をスムーズにする */
}

.swpm-login-form-submit:hover {
    background: #d2232a; /* マウスを乗せたときにボタンの背景色を赤くする */
}

/* パスワードリセットボタン */
.swpm-pw-reset-submit {
    width: 100%; /* ボタンの幅をフォーム全体に合わせる */
    padding: 10px; /* ボタン内の上下左右に余白を追加 */
    background: #000; /* ボタンの背景色を黒に設定 */
    color: white; /* ボタンの文字色を白に設定 */
    border: none; /* ボタンの枠線を消す */
    border-radius: 5px; /* ボタンの角を丸くする */
    font-size: 1rem; /* ボタンの文字サイズを設定 */
    cursor: pointer; /* マウスを乗せたときに指カーソルを表示 */
    transition: background 0.3s ease; /* ホバー時の背景色変化をスムーズにする */
}

.swpm-pw-reset-submit:hover {
    background: #d2232a; /* マウスを乗せたときにボタンの背景色を赤くする */
}



/* サインアップリンク部分 */
.signup-link {
    margin-top: 15px; /* リンク部分の上に余白を追加 */
    text-align: center; /* リンクを中央揃え */
}

.signup-link a {
    color: #0056b3; /* リンク文字の色を黒に設定 */
    text-decoration: none; /* 下線を消す */
}

.signup-link a:hover {
    text-decoration: underline; /* マウスを乗せたときに下線を追加 */
}