/* ★★★★★★★★★★★★★★
   ★ 全画面 -共通設定-
   ★★★★★★★★★★★★★★*/

/* ----------------------
    全体設定
------------------------*/
body{
    background-color: #FFFFFF;
}

p{
    margin: 0;
}

span{
    font-weight: bold;
}

.custom-span{
    color: red;
}

/* preloaderを非表示にする(画面遷移時のJS、ロゴマーク付き画面が出ないようにする) */
.preloader {
    display: none !important;
}
/* ----------------------
    テーブル関連
------------------------*/
.table_sticky {
    display: block;
    overflow-y: scroll;
    height: calc(100vh/2);
}
.table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #C1FFCD;
    border-top:#FFFFFF;
}

/* ----------------------
    ボタン
------------------------*/
.custom-back-btn {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    background: #33CC66;
    padding: 5px 15px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: .3s;
    border: none;
}

.custom-back-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid #333;
    border-radius: 6px;
    box-sizing: border-box;
    z-index: -1;
    transform: scale(1.2);
    opacity: 0;
    transition: transform ease .3s, opacity .3s;
}

.custom-back-btn:hover {
    color: #333;
    background: transparent;
    background-color: #99FF99;
}

.custom-back-btn:hover::before {
    transform: scale(1);
    opacity: 1;
}

.custom-del-btn {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    background: #CC0000;
    padding: 5px 15px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: .3s;
    border: none;

}

.custom-del-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid #333;
    border-radius: 6px;
    box-sizing: border-box;
    z-index: -1;
    transform: scale(1.2);
    opacity: 0;
    transition: transform ease .3s, opacity .3s;
}

.custom-del-btn:hover {
    color: #333;
    background: transparent;
    background-color: #FF6666;
}

.custom-del-btn:hover::before {
    transform: scale(1);
    opacity: 1;
}

.custom-other-btn {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    background: #0D6EFD;
    padding: 5px 15px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: .3s;
    border: none;

}

.custom-other-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid #333;
    border-radius: 6px;
    box-sizing: border-box;
    z-index: -1;
    transform: scale(1.2);
    opacity: 0;
    transition: transform ease .3s, opacity .3s;
}

.custom-other-btn:hover {
    color: #333;
    background: transparent;
    background-color: #0de5fdda;
}

.custom-other-btn:hover::before {
    transform: scale(1);
    opacity: 1;
}

.demo-btn a {
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.demo-btn a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #6bb6ff;
    transition: 0.3s;
}
.demo-btn a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #6bb6ff;
    transition: 0.3s;
}
.demo-btn a:hover:before, .demo-btn a:hover:after {
    right: -2.5em;
}
.demo-btn a:hover {
    background: #edf6ff;
    color: #6bb6ff;
}

/* ★★★★★★★★★★★★★★
   ★ 全画面 -間隔調整用-
   ★★★★★★★★★★★★★★*/
/* ----------------------
    余白（内側）
------------------------*/
.spacing-pt1{
    padding-top: 1rem;
}

.spacing-pt3{
    padding-top: 3rem;
}

.spacing-pt5{
    padding-top: 5rem;
}

.spacing-pt10{
    padding-top: 10rem;
}

.spacing-pb1{
    padding-bottom: 1rem;
}
.spacing-pb5{
    padding-bottom: 5rem;
}

.spacing-pb10{
    padding-bottom: 10rem;
}
/* ----------------------
    余白（外側）
------------------------*/
.spacing-mt1{
    margin-top: 1rem;
}

.spacing-mt3{
    margin-top: 3rem;
}

.spacing-mt5{
    margin-top: 5rem;
}

.spacing-mt10{
    margin-top: 10rem;
}

.spacing-ml1{
    margin-left: 1rem;
}

.spacing-ml3{
    margin-left: 3rem;
}

.spacing-ml5{
    margin-left: 5rem;
}

.spacing-ml10{
    margin-left: 10rem;
}

.spacing-mr1{
    margin-right: 1rem;
}

.spacing-mr3{
    margin-right: 3rem;
}

.spacing-mr5{
    margin-right: 5rem;
}

.spacing-mr10{
    margin-right: 10rem;
}

.spacing-mb1{
    margin-bottom: 1rem;
}

.spacing-mb3{
    margin-bottom: 3rem;
}

.spacing-mb5{
    margin-bottom: 5rem;
}

.spacing-mb10{
    margin-bottom: 10rem;
}
/* ----------------------
    配置
------------------------*/
.custom-align-left{
    text-align: left;
}

.custom-align-center{
    text-align: center;
}

.custom-align-right{
    text-align: right;
}

/* ----------------------
    横幅
------------------------*/
.custom-mw-100{
    max-width: 100px;
}

.custom-mw-200{
    max-width: 200px;
}

.custom-mw-300{
    max-width: 300px;
}

.custom-mw-400{
    max-width: 400px;
}

/* ----------------------
    区切り線
------------------------*/

.ditch{
    border-bottom: 1px solid #9DE8FD;
}


/* ★★★★★★★★★★★★★★
   ★  bootstrap v5.x対応
   ★  ⇒adminLTEv3を利用している関係でbootstrap v5が動かないため、
   ★    その対応を記述する。なお、レスポンシブデザインについては、
   ★    ここに記述しているクラス名を検索して見つけること
   ★★★★★★★★★★★★★★*/

.custom-card-header{
    /* background-color: #f1f1f1af; */
    background: linear-gradient(-225deg,
                            #9DE8FD 0%,
                            #C1FFCD 10%,
                            #9DE8FD 20%,
                            #C1FFCD 30%,
                            #9DE8FD 40%,
                            #C1FFCD 50%,
                            #9DE8FD 60%,
                            #C1FFCD 70%,
                            #9DE8FD 80%,
                            #C1FFCD 90%);
}

.custom-text-md-end{
    text-align: right;
}
/* ★★★★★★★★★★★★★★
   ★ ホーム画面
   ★★★★★★★★★★★★★★*/
#charts {
    display: flex;
    flex-wrap: wrap;       /* 横並びで折り返し */
    justify-content: center;
    gap: 20px 5px;              /* グラフ間の余白 */
}

.circle-chart-container {
    flex: 1 1 22%;         /* 横4つまで */
    max-width: 180px;      /* グラフサイズ上限 */
    min-width: 150px;      /* 小さくなりすぎ防止 */
    height: auto;         /* 高さを固定 */
    position: relative;    /* Chart.js推奨 */
}

.bar-chart-container{
    width: 100%;
    height: 400px;
}

.custom-container{
    display: flex;
}

.home-box1,
.home-box3{
    background-color: #caffd438;
    padding: 20px;
    border: 10px #9DE8FD;
    border-style: double ;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を軽く */
    min-width: 200px;
}
.home-box1,
.home-box2 {
    flex: 1;                     /* 横幅を均等に広げる */
}

.home-box3 {
    margin-bottom: 20px;
}

.home-box3:last-child{
    height: 500px;
}

.home-box4{
    text-align: center;
}

.home-favorite-box{
    border: 5px #ebe7e7;
    border-style: solid ;
    height: 85%;
    overflow: auto;
}

/* ★★★★★★★★★★★★★★
   ★ 学習画面 -contents共通設定-
   ★★★★★★★★★★★★★★*/

/* ----------------------
    見出し
------------------------*/
h1 {
    position: relative;
    background: #e8fdfd;
    padding: 0.25em 0.5em;
    border-left: solid 2em #9DE8FD;
}

h1:before {
    font-family: "Font Awesome 5 Free";
    content: "\f303";
    position: absolute;
    padding: 0em;
    color: white;
    font-weight: 900;
    left: -1.35em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

h3 {
    max-width: 40vw;
    font-size: 20px;
    position: relative;
    padding: 0.5em;
    background: #C1FFCD;
}

h3::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px #2fd350;
}

h4 {
    display: inline-block;
    background: linear-gradient(-225deg, 
                            #FFC000 0%,
                            #FFFF00 10%,
                            #FFC000 20%,
                            #FFFF00 30%,
                            #FFC000 40%,
                            #FFFF00 50%,
                            #FFC000 60%,
                            #FFFF00 70%,
                            #FFC000 80%,
                            #FFFF00 90%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    font-weight: bold;
    animation: gradientMove 5s ease infinite;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px ;
    border-radius: 3px 0 3px 0;
    border-image: linear-gradient(-225deg,
                                #FFC000 0%,
                                #FFFF00 10%,
                                #FFC000 20%,
                                #FFFF00 30%,
                                #FFC000 40%,
                                #FFFF00 50%,
                                #FFC000 60%,
                                #FFFF00 70%,
                                #FFC000 80%,
                                #FFFF00 90%);
    border-image-slice: 1;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

h4:before, h4:after {
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px #FFC000;
    border-radius: 50%;
}

h4:after {
    top:-12px;
    left:-12px;
}
h4:before {
    bottom:-12px;
    right:-12px;
}

h5 {
    display: inline-block;
    color: red;
    font-weight: bold;
    position: relative;
    padding: 0.25em 1em;
    border-top: solid 2px red;
    border-bottom: solid 2px red;
}
h5:before, h5:after {
    content: '';
    position: absolute;
    top: -7px;
    width: 2px;
    height: -webkit-calc(100% + 14px);
    height: calc(100% + 14px);
    background-color: red;
}
h5:before {
    left: 7px;
}
h5:after {
    right: 7px;
}

h6 {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    font-weight: bold;
}

h6:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(119, 195, 223);
}
h6:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: solid 3px rgb(119, 195, 223);
}

.lesson-subtitle{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ----------------------
    練習問題
------------------------*/
.Q-box{
    padding: 20px 10px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.Q-img,.A-img{
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

.Q-img img,.A-img img{
    max-width: 500px;
    cursor: pointer;
}

.A-h4 {
    background: linear-gradient(-225deg, 
                            #9DE8FD 0%,
                            #C1FFCD 10%,
                            #9DE8FD 20%,
                            #C1FFCD 30%,
                            #9DE8FD 40%,
                            #C1FFCD 50%,
                            #9DE8FD 60%,
                            #C1FFCD 70%,
                            #9DE8FD 80%,
                            #C1FFCD 90%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    border: solid 2px ;
    border-radius: 3px 0 3px 0;
    border-image: linear-gradient(-225deg,
                                #9DE8FD 0%,
                                #C1FFCD 10%,
                                #9DE8FD 20%,
                                #C1FFCD 30%,
                                #9DE8FD 40%,
                                #C1FFCD 50%,
                                #9DE8FD 60%,
                                #C1FFCD 70%,
                                #9DE8FD 80%,
                                #C1FFCD 90%);
    border-image-slice: 1;
}

.A-h4:before, .A-h4:after {
    border: solid 2px #9DE8FD;
    border-radius: 50%;
}

.A-btn {
    display: inline-block;
    background: linear-gradient(135deg, #ff8c00, #ff0080);
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.A-btn:hover {
    background: linear-gradient(135deg, #ff6a00, #ff006a);
    transform: scale(1.05);
}

.A-content {
    display: none; /* 初期状態では非表示 */
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
    border-radius: 5px;
}

.A-code {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto; /* 横スクロール対応 */
}

pre {
    margin: 0;
    white-space: pre-wrap; /* 折り返し */
    word-wrap: break-word;
}

code {
    font-family: Consolas, "Courier New", monospace;
    color: #333;
}

/* クリックされたボタンに対するスタイル */
.A-btn.active {
    background-color: #007bff; /* ボタン背景色 */
    color: white; /* ボタン文字色 */
    border: 4px solid #0056b3; /* ボーダーカラー */
}

.A-btn.active:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
    border-color: #003f7d; /* ホバー時のボーダーカラー */
}
/* ----------------------
    教材画像
------------------------*/
.lesson-img{
    text-align: center;
    background-color: #e2e8e8;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.lesson-img img{
    max-width: 500px;
    height: auto;
    cursor: pointer;
}

.fullscreen-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.fullscreen-img img {
    max-width: 70%;
    max-height: 70%;
    cursor: pointer;
}

/* ----------------------
    教材資料
------------------------*/

.documents{
    text-align: center;
}

.iframe-container,.documents iframe{
    width: 800px;
    height: 450px;
}

.iframe-container {
    position: relative;
    display: inline-block; /* 中央寄せを適用するため */
}

/* 🔄 スピナー（回転アニメーション） */
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----------------------
    教材動画
------------------------*/
.movie{
    text-align: center;
}

.thumbnail-container {
    position: relative;
    cursor: pointer;
  }

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 50%;
  }

/* ----------------------
    注釈・ダウンロード
------------------------*/
.notes-box{
    text-align: center;
}

.notes-header{
    background: linear-gradient(-225deg,
                            #FFC000 0%,
                            #FFFF00 10%,
                            #FFC000 20%,
                            #FFFF00 30%,
                            #FFC000 40%,
                            #FFFF00 50%,
                            #FFC000 60%,
                            #FFFF00 70%,
                            #FFC000 80%,
                            #FFFF00 90%);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid #c7c7c7;
    border-collapse: collapse;
}

.notes-container{
    padding: 0.5rem;
    background-color: #fbfbf0fc;
    border: 1px solid #c7c7c7;
    border-top: 0px;
    text-align: left;
}

/* ----------------------
    フッター・レッスン終了
------------------------*/

.lesson-end{
    text-align: center;
}

.footer{
    text-align: center;
}

.footer img{
    max-width: 10%;
    max-height: auto;
}

/* 完了チェックボックス */
.complete-checkbox-on,
.complete-checkbox-off,
.heart-on,
.heart-off {
    width: 80px;
    height: 80px;
    cursor: pointer;
}

/* 理解度確認のスター表示 */
.star {
    font-size: 30px;
    cursor: pointer;
    color: #ccc;
}
.star.selected {
    color: gold;
}

/* ★★★★★★★★★★★★★★
   ★ サイドバー
   ★★★★★★★★★★★★★★*/
.main-sidebar {
    background-color: #000000 !important; /* 好きな色に変更 */
    
}
.main-sidebar .nav-header{
    color: #FFFFFF !important; /* 好きな色に変更 */
}

.main-sidebar .nav-link{
    color: #FFFFFF !important; /* 好きな色に変更 */
}

.main-sidebar .brand-link {
    background-color: #000000 !important; /* 好きな色に変更 */
    color: #FFFFFF !important; /* テキストの色を白に変更（必要に応じて調整） */
}

.main-sidebar .brand-text {
    color: #FFFFFF !important; /* ロゴのテキスト色 */
}

.custom-menu.active{
    color: #000000 !important;
    background-color: #9DE8FD !important;
}

.custom-menu:hover{
    color: #000000 !important;
    background-color: #e9faf2 !important;
}

.nav-link .right{
    top: auto !important;
    bottom: 11px;
}

.custom-menu {
    position: relative; /* 相対位置指定で制御 */
    z-index: 1; /* リンクの優先度を上げる */
}

.custom-menu .badge {
    position: relative;
    z-index: -1; /* ラベルの優先度を下げる */
}

/* ★★★★★★★★★★★★★★
   ★ ヘッダー
   ★★★★★★★★★★★★★★*/



/* ★★★★★★★★★★★★★★
   ★ フッター
   ★★★★★★★★★★★★★★*/


/* ★★★★★★★★★★★★★★
   ★  ログイン画面
   ★★★★★★★★★★★★★★*/

   .login-logo{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    width:auto;
    text-align: center;
    background-color: #FFFFFF;
    border: solid 1px #FFFFFF;
    border-radius: 10px;
}

.login-logo img{
    width:280px;
    height: auto;
}


/* ★★★★★★★★★★★★★★
   ★  登録・更新・一覧画面 -共通設定-
   ★★★★★★★★★★★★★★*/
/* ----------------------
    フォーム関連
------------------------*/

.form-control{
    appearance: button;
    background-color: #FFFFFF;
}

.form-check-input{
    background-color: #FFFFFF;
}

.custom-title{
    margin: 0;
    text-align: center;
    font-size: 20px;
}

.custom-radio,.custom-checkbox,.custom-label{
    margin-top: auto;
    margin-bottom: auto;
}

.custom-checkbox input{
    margin-right: 5px;
}

/* ----------------------
    検索機能
------------------------*/
.search-input,.search-select{
    background-color: #f4f5e6;
}

.search-box{
    border: 3px double #000000;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.search-select{
    max-width: 200px;
}

/* ★★★★★★★★★★★★★★
   ★ パスワードリセット希望画面
   ★★★★★★★★★★★★★★*/
.custom-pass-reset-btn{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* ★★★★★★★★★★★★★★
   ★  ユーザー一覧画面
   ★★★★★★★★★★★★★★*/

.emphasize0,.emphasize1,.emphasize2,
.emphasize3,.emphasize4,
.emphasize8,.emphasize9,.role-emphasize0,
.role-emphasize1,.flg-emphasize{
    font-size: 11px;
    padding: 0.5rem 0.5rem;
    border-radius: 50%;
}
.emphasize0,.role-emphasize1{
    background-color: #c8f60d;
    color: red;
}

.emphasize1 {
    background-color: #50e84e;
    color: red;
}

.emphasize2,.role-emphasize0{
    background-color: #4d9bc1;
    color: #fff;
}
.emphasize3{
    background-color: #1fc98e;
    color: #fff;
}
.emphasize4{
    background-color: #d0227c;
    color: #fff;
}
.emphasize8 {
    background-color: #9b0da8;
    color: #fff;
}
.emphasize9 {
    background-color: #cd0d0d;
    color: #fff;
}
.flg-emphasize{
    background-color: #05e1f1;
    color: #fff;
}

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

@media screen and (max-width: 1200px) {
    .custom-container{
        display: block;
    }
    .home-box1{
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 992px) {
	/* 992px以下になった場合に適用されるCSS（タブレット用） */
    .iframe-container,.documents iframe{
        width: 500px;
        height: 350px;
    }
}

@media screen and (max-width: 959px) {
	/* 959px以下になった場合に適用されるCSS（タブレット用） */
    h3 {
        max-width: 80vw;
      }
}

@media screen and (max-width: 767px) {
	/* 767px以下になった場合に適用されるCSS（タブレット用） */
    .custom-text-md-end{
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
	/* 480px以下になった場合に適用されるCSS（スマホ用） */
    .iframe-container,.documents iframe{
        width: 400px;
        height: 300px;
    }
}