@charset "utf-8";

:root {
  --color-blue: #2291b6;
  --color-blue-rgb: 34,145,182;
}

body{letter-spacing:1px; font-size:0.9em; color:#000;}
a{transition : all 0.5s ease 0s;}

/*==============================================================*/
/* ▼学習画面 */
/*==============================================================*/

/*===== ボタン =======================================*/
/* 右下に→ */
.btn01{display:block; background:var(--color-blue); border:solid 1px #176d8a; color:#fff; text-align:center; text-decoration:none; margin:10px 0 0 0; position:relative; padding:6px;}
.btn01:after{display:block; background:#ff7800; content:"\f061"; font-family:FontAwesome; width:18px; height:18px; position:absolute; bottom:0; right:0; font-size:12px;}
.btn01:hover{background:rgba(var(--color-blue-rgb),.7);}

/* ←前の問題、次の問題→ */
/* 左右共通 */
.btnPN{background:var(--color-blue); display:inline-block; color:#fff; text-align:center; text-decoration:none; position:relative; border:solid 2px #87c7dc; border-radius:20px; padding:6px 30px;}
.btnPN:hover{background:rgba(var(--color-blue-rgb),.7); color:#fff; text-decoration:none;}

/* オレンジ背景ボタン */
.btn02{display:inline-block; background:#e07e43; color:#fff; text-align:center; text-decoration:none; padding:6px 16px; border-radius:14px; font-size:0.8em; border:solid 2px rgba(255,255,255,.9);}
.btn02:hover{background:rgba(224, 126, 67, .7);}

/* グレーボタン(.btnと合わせて使用) */
.btn03{background:#333; color:#fff; padding:6px 20px;}
.btn03:hover{background:rgba(51,51,51,.7); color:#fff;}

/* ブルー背景ボタン */
.btn04{background:var(--color-blue); color:#fff; border:solid 2px #87c7dc; padding:6px 20px; border-radius:20px;}
.btn04:hover{background:rgba(var(--color-blue-rgb),.7); color:#fff;}

/*===== ヘッダー =======================================*/
header{border-bottom:solid 1px var(--color-blue);}
header .logo{padding:4px 0 4px 10px;}
header .btnQ{padding-left:30px;}

/* アイコン調整 */
.navbar-light .navbar-nav .nav-link{
  color: #36b9cc!important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: #36b9cc!important;
}
.navbar-light .navbar-nav .nav-link.disabled {
  color: #36b9cc!important;
}
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color:  #365ecc!important;
}

/* 音量ボタン */
.iconSound {
  cursor: pointer;
  user-select: none;
  width: 40px;
}
input:checked + .iconSound i::before {
  content: "\f6a9"; /* チェック時のアイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* 説明ボタン */
.iconInfo{user-select: none;}
/* 説明ボタン点滅 */
.iconInfo i.flashing{
  animation-name: flashing;
  animation-duration: 2.4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@keyframes flashing {
  0% {
    color: #36b9cc;
  }
  25% {
    color: red;
  }
  50% {
    color: #36b9cc;
  }
  75% {
    color: red;
  }
  100% {
    color: #36b9cc;
  }
}

/*===== サイドバー =======================================*/
ul.sidebar{background-color: var(--color-blue);}
ul.sidebar li>a{color: #fff!important; user-select: none;}
ul.sidebar li>a:hover{background:rgba( 255, 255, 255, .6);}
ul.sidebar li>a i{color: #fff!important;}
ul.sidebar li.active{background-color:rgba(255, 255, 255, .3);}
ul.sidebar li.active:hover{background-color:rgba(255, 255, 255, .6);}
@media (min-width: 768px) {
	/* サイドバーが開いたときの学習項目の右端の＞とＶを非表示 */
	.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
    		content: '';
	}
	.sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
    		content: '';
	}
	/* 開いたサイドバー：学習項目の右に＞を表示 */
	.sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed span i{font-size:12px; margin-top:2px;}
}
/* 縮小時のサイドバーでダッシュボード、お知らせをアイコンだけに */
.sidebar.toggled .nav-item .nav-link span {display:none;}
@media (max-width: 767px) {
	/* スマホ時：サイドバーでダッシュボード、お知らせをアイコンだけに */
	.sidebar .nav-item .nav-link span {display:none;}
}

/* ダッシュボードトップの場合はメニューをアクティブ化する */
body#page-top ul.sidebar li.active-pagetop{
	background-color:rgba(255, 255, 255, .3);
}

/*===== サブメニュー =======================================*/
ul.sidebar nav.submenu{
  background: #a7d3e2; margin: 0; padding: 0;
}
ul.sidebar nav.submenu>ul>li{
  padding: 0!important;
  margin: 0 10px!important;
}
ul.sidebar nav.submenu>ul>li span{
  background: var(--color-blue);
  color: #fff!important;
  font-weight: 600;
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
}
/* ▼ かなりしっかり目の左上矢印 */
.fukidashi::before{
  content: "";
  position: absolute;
  top: 0px;          /* span内の上からの位置（少し内側）⇒マウスが空きに触れたときにサブメニューが消えてしまうのでtopを0に */
  left: -14px;       /* 外側へ突き出す量を増やす */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 14px 24px 0;  /* 上 右 下 左 → 矢印が明確に大きく */
  border-color: transparent #a7d3e2 transparent transparent;
}
ul.sidebar nav.submenu>ul>li ul li{
  border-bottom: dashed 1px #6ebdfe;
}
ul.sidebar nav.submenu>ul>li ul li:last-child{
  border-bottom: none;
}
ul.sidebar nav.submenu > ul > li ul li i.fa-unlock-alt {
  color:#00a381!important;
  margin-right:1em;
}
ul.sidebar nav.submenu > ul > li ul li i.fa-lock {
  color:#333!important;
  margin-right:1em;
}
ul.sidebar nav.submenu>ul>li ul li a{
  color: #333!important;
  font-weight: 600;
}
ul.sidebar nav.submenu>ul>li ul li a:hover,
ul.sidebar nav.submenu>ul>li ul li.active a{
  color: #fe6f18!important;
}
ul.sidebar nav.submenu>span.side-session-title {
  display: block;
  margin: 0 10px;
  font-weight: 600;
}

/*===== メニュー =======================================*/
.menu{width:100%; text-align:center; height:100%; background:#333;}
.menu div{height:50px; border-bottom:solid 1px #666;}
.menu a{background:var(--color-blue); height:100%; display:block; padding-top:10px;}
.menu a:hover{background:rgba(var(--color-blue-rgb),.7);}
.menu i{font-size:2em; color:#fff;}

/*===== コンテンツ全体 =======================================*/
.contWrap{width:calc(100% - 70px);}
header .txtQuestion{padding:10px; color:var(--color-blue); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


/*===== コンテンツ(左側) =======================================*/
.contL{background:#ccc; padding:10px; border-right:10px solid #333; min-height:90vh;}

/* 動画 */
#video-area{
  position: relative;
  padding-bottom: 71%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
#video-area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* 問題・ヒント */
.tipsWrap{background:#fff;  padding:20px;}
.tips-video{width: 1200px; margin: 0 auto;}

/* 閉じるボタン(仮置き) */
.tojiru{position:absolute; top:40%; right:6px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
.btnTojiru{background:rgba(61, 95, 106,.7); color:#fff; text-decoration:none; padding:50px 6px; border-radius:6px 0 0 6px;}
.btnTojiru:hover{background:rgba(61, 95, 106,1); padding-left:14px;}

/*===== コンテンツ(右側) =======================================*/
/* 穴埋め、全入力切替ボタン */
input.inputTypeBtn[type="radio"] {
  display: none;
}
.inputTypeBtn-A,
.inputTypeBtn-B{
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  flex: 1; width: 50%;
  color: #fff;
  border-radius: 6px 6px 0 0;
  user-select: none;
  background-color: #ccc;
}
.inputTypeBtn-A{
  margin: 1em 0 0 8px;
}
.inputTypeBtn-B{
  margin: 1em 8px 0 0;
}
/* ラジオボタンがcheckedになった場合に色を変える設定 */
.inputTypeBtn-A:has(input:checked){background-color: #4d9a73;}
.inputTypeBtn-B:has(input:checked){background-color: #2291b6;}

/* 出力エリア */
.outWrap{padding:20px; border:solid 1px #ccc; margin:10px;}

/* 穴埋め・全入力切替 */
div#toggle-codeinput {
  display:flex;
}

/* 画面説明の全体枠 */
div.desc_wrap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
/* 画面説明の背景 */
div.desc_bg {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
}
/* 画面説明のハイライト */
div.desc_highlight {
  position: absolute;
  font-size: 0;
  background-color: rgba(255, 255, 255, 1.0);
  mix-blend-mode: overlay;
  border: 8px solid rgba(34,145,182,.5);
  transition: transform 0.5s;
}
/* 画面説明の吹き出し */
div.speech_bubble {
  position: absolute;
  background-color: rgba(255, 255, 255, 1.0);
  margin: 0;
  padding: 20px 0px 0px;
  border-radius: 20px;
  max-width: 500px;
  transition: transform 0.5s;
  box-shadow: 7px 7px 8px rgba(25,34,37, 0.4);
}
/* 三角 */
div.speech_bubble::before,
div.speech_bubble::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
/* 三角部分 */
div.speech_bubble[top]::before{
  top: 20px;
}
div.speech_bubble[bottom]::before{
  bottom: 20px;
}
div.speech_bubble[left]::before{
  left: -25px;
  border-style: solid;
  border-color: transparent rgba(34,145,182,1) transparent transparent;
  border-width: 20px 20px 20px 0px;
}
div.speech_bubble[right]::before{
  right: -25px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(34,145,182,1);
  border-width: 20px 0px 20px 20px;
}
/* 三角背景 */
div.speech_bubble[top]::after{
  top: 31px;
}
div.speech_bubble[bottom]::after{
  bottom: 31px;
}
div.speech_bubble[left]::after{
  left: -18px;
  border-style: solid;
  border-color: transparent white transparent transparent;
  border-width: 9px 9px 9px 0px;
}
div.speech_bubble[right]::after{
  right: -18px;
  border-style: solid;
  border-color: transparent transparent transparent white;
  border-width: 9px 0px 9px 9px;
}
/* 説明文の位置など調整用div */
div.desc_textarea {
  min-height: 50px;
  padding:0;
  margin:0;
  display: flex;
  align-items: center;
}
/* 説明文 */
p.desc_text {
  padding:0;
  margin:0 20px 20px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* ボタンの位置など調整用div */
div.desc_btnarea {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 20px 20px;
  background:rgba(34,145,182,0.2);
  padding: 10px 0;
}
/* ボタン */
i.desc_btn {
  display: inline-block;
  cursor: pointer;
  font-size: 26px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color:rgba(34,145,182,1);
  user-select: none;
}
/* 前ボタンはアイコンを左右反転 */
i.desc_prev::before {
  transform: scale(-1, 1);
}
/* 前次ボタンホバー時にアイコン変更 */
i.desc_prev:hover::before,
i.desc_next:hover::before {
  /*content: '\F4F2';*/
  color:rgba(34,145,182,0.6);
}
/* 閉じるボタン */
i.desc_close {
  position: absolute;
  top: 6px;
  right: 6px;
  color:rgba(34,145,182,1);
  font-size:26px;
}
/* 閉じるボタンホバー時にアイコン変更 */
i.desc_close:hover::before {
  /*content: '\F622';*/
  color:rgba(34,145,182,0.6);
}
/* ボタン操作不可 */
i.desc_disabled {
  pointer-events: none;
  color: lightgrey;
}
/* 進捗 */
div.desc_progress {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0px 20px;
  text-align:center;
}

/* 全問正解モーダルの背景 */
div.compmdl_bg {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
/* 全問正解モーダルのハイライト */
div.compmdl_highlight {
  position: absolute;
  font-size: 0;
  background-color: rgba(255, 255, 255, 1.0);
  mix-blend-mode: overlay;
  border: 2px solid lime;
  transition: transform 0.5s;
}
/* 全問正解モーダルのメッセージ枠 */
div.compmdl_msgwrap {
  position: absolute;
  background-color: rgba(255, 255, 255, 1.0);
  margin: 0;
  padding: 0px;
  /*border: 2px solid lime;*/
  border-radius: 20px;
  max-width: 600px;
  transition: transform 0.5s;
  box-shadow: 7px 7px 8px rgba(25,34,37, 0.4);
}
h3.compmdl_title {
  padding:10px 30px 10px 30px;
  text-align: center;
  margin:0;
  background:#01b75b;
  border-radius: 20px 20px 0 0;
  color:#fff;
  font-size: 22px;
}
h3.compmdl_title span{
  position:relative;
  top:-6px;
}
h3.compmdl_title::before {
  font-family: "Font Awesome 6 Free";
  content: "\f058";
  font-size:36px;
  padding-right:10px;
}
/* 全問正解モーダルのボタン */
i.compmdl_btn {
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  text-align: center;
  margin:0 auto 10px auto;
  user-select: none;
  font-style: normal;
}
i.compmdl_btn span {
  background:rgba(1,183,91,1);
  border-radius: 10px;
  color:#fff;
  padding:4px 40px;
}
i.compmdl_btn span::before {
  font-family: "Font Awesome 6 Free";
  content: "\f057";
  color:#fff;
  padding-right:6px;
  font-weight:900;
}
i.compmdl_btn span:hover {
  background:rgba(1,183,91,.7);
}
/* 全問正解モーダルの説明文の位置など調整用div */
div.compmdl_textarea {
  min-width: 400px;
  min-height: 200px;
  max-height: 500px;
  padding:10px 10px 10px 20px;
  margin:0;
  /*display: flex;*/
  align-items: center;
  overflow-y: auto;
}
/* 全問正解モーダルの説明文 */
p.compmdl_text {
  padding:0;
  margin:0;
/*  word-wrap: break-word;
  overflow-wrap: break-word;*/
  width: 100%;
  /*overflow-y: scroll;
  overflow-x: hidden;*/
}

/*==============================================================*/
/* ▼ダッシュボード */
/*==============================================================*/
/* 見出し */
.koreTit{
	font-size:26px;
	border-bottom:dashed 2px #006e37;
	color:#006e37;
	font-weight:700;
	letter-spacing:0.2rem;
	min-height:70px;
	background-image:url(../img/profiles/6.png);
	background-position:left top;
	background-repeat:no-repeat;
	background-size:70px auto;
	padding:20px 0 0 90px;
}

/* 問題-大枠 */
body#page-top .card{
	border:none;
}
body#page-top .lessonWrap{
	border:solid 2px #cfdfed;
}

/* 問題-中枠・小枠 */
body#page-top .lessonWrap .card-body{
	padding:0;
}
body#page-top .lessonWrap .card{
	padding:0;
	margin:0;
}
body#page-top .accordion-lesson:hover{
	cursor: pointer;
	user-select: none;
	filter: brightness(1.1); /* 1.1倍明るく */
}

/* 問題の大項目(PHPなど) */
h2.session-title{background:none; box-shadow:none;}


/* 問題-正解時の背景色*/
body#page-top .accordion-lesson.completed { background-color: #01b75b; }     /* 緑 */

/* 問題-通常背景色*/
body#page-top .accordion-lesson.incomplete {
   background-color: #2a87ee;
   background-image: url('img/profiles/' .Auth::user()->profile_image . '.png');
 }  /* 青 */

/* 問題-未着手時の背景色*/
body#page-top .accordion-lesson.not-started { background-color: #6c757d; }  /* グレーまたは薄茶 */


/* +-マーク */
body#page-top .accordion-lessonTitle{
	font-size:20px;
}

/* CLEAR!マーク */
body#page-top .lesson-completed-text{
	font-size: 12px;
	color:red;
	font-weight:700;
	padding:0;
	background:none;
	text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white;
}

/* 問題（アコーディオンオープン） */
.accordion-lesson dd{
	background-color:#fff!important;
}
.lesson-horizontal-list li{
	height:auto!important;
	width:100%!important;
}
.lesson-horizontal-list li::after{height:0px!important;}	/* 順序の縦線を非表示 */
.lessonBG{
	border-bottom:solid 1px #aecee3;
	min-height:70px;
	padding-bottom:10px;
	background:#fff;
}
.lesson-horizontal-list li:last-of-type .lessonBG:last-child{	/* 最後の問題は下線無し */
	border:none;
}
.lessonBG div:nth-of-type(2){padding-right:60px;}

/* 問題正解済み（CLEAR画像表示） */
.lessonBG-clear{
	background-image:url(../front/img/tns/clear.png);
	background-position:right top;
	background-repeat:no-repeat;
}

/* 問題ロック中（ロック錠画像表示） */
.lessonBG-locked{
	background-image:url(../front/img/tns/locked.png);
	background-position:right top;
	background-repeat:no-repeat;
	cursor: not-allowed;
}

/* レッスン内容のサイズが200pxより小さくなったら背景画像(CLEARとロック錠)を調整 */
.dashboardContainer{
	container-type: inline-size;
	container-name: lessonsize-ajs;
}

@container lessonsize-ajs (max-width: 200px) {
  .lessonBG-locked, .lessonBG-clear {
    background-size: 30px auto;
  }
  .lessonBG div:nth-of-type(2){padding-right:30px;}
}

/* お知らせ */
.news-wrap{
  height: 150px;
  background: white;
  overflow-y:auto;
  border: solid 2px #cfdfed;
}
.news-list{
  list-style: none outside;
  margin: 0;
  padding: 10px;
}
.news-row{
  padding: 10px 0px;
}
.news-row:first-child{
  padding: 0px 0px 10px;
}
.news-row:last-child{
  padding: 10px 0px 0px;
}
.news-row:not(:last-child){
  border-bottom: 1px solid #CCC;
}
.news-row div{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
}
.news-date{
  margin-right: 20px;
}
.news-title{}

/*==============================================================*/
/* ▼ログアウト：ポップアップ */
/*==============================================================*/
.modal-content{
	border-radius: 20px;
	box-shadow: 7px 7px 8px rgba(25,34,37, 0.4);
}
.modal-footer{
	justify-content: center;
	background:rgba(34, 145, 182, 0.2);
}
button.close{
	background-color:none;
	opacity:1;
}


/*==============================================================*/
/* ▼ログイン画面 */
/*==============================================================*/
.bg-gradient-primary {	/* 背景色：緑に変更 */
    background-color: #398545;
    background-image: none;
}


/*==============================================================*/
/* ▼アカウント作成画面 */
/*==============================================================*/
.profileImage-size img{height:148px; width:auto;}
/* パスワード確認エラーメッセージ位置調整 */
.confirm-pwd-err-msg{
	position:absolute;
	top:40px;
	left:0px;
}
.confirm-pwd-err-msg-pos{
	height:80px;
}

/*==============================================================*/
/* ▼パスワード再設定画面 */
/*==============================================================*/
.passwordWrap{
	position: relative;
	display:flex;
}
.passwordWrap input{
	padding-right:60px;
}
.passwordWrap button{
	position: absolute;
	right: 10px;
	top: 10px;
	/* top: 50%;
	transform: translateY(-50%); */
	border:none;
	outline:none;
	background:none;
	color:#6c757d; font-size:16px;
}



/*==============================================================*/
/* ▼レスポンシブ */
/*==============================================================*/
@media (max-width: 767px) {
  body header nav .row{display: none;}


  /*===== ボタン：←前の問題、次の問題→ =======================================*/
  .pagePN-area .row {
    display:flex;
    justify-content: center;
    flwx-wrap: wrap;
  }
  .pagePN-area .row div:nth-of-type(2){flex: 0 0 100%;} /* 他の要素と並ばずに１行占領 */

  .pagePN-area .row div:nth-of-type(1),
  .pagePN-area .row div:nth-of-type(3){	/* 前の問題、次の問題ボタンを横並びに */
    display: inline-block;
    width: 44%;
    max-width: 44%;
    min-width: 170px;
    margin: 1%; padding:0 4px;
  }
  .pagePN-area .btnPrev,
  .pagePN-area .btnNext{
    width:100%;
  }

  /* 並び順の調整 */
  .pagePN-area .col-md-auto.mt-2.ms-2 { order: 2; }  /* 前の問題ボタン */
  .pagePN-area .txtQuestion { order: 1; } /* 問題タイトル */
  .pagePN-area .col-md-auto.mt-2:not(.ms-2) { order: 3; }  /* 次の問題ボタン */

}