@import url("bootstrap-custom/bootstrap-primary.css");
@import url("bootstrap-custom/bootstrap-info.css");
@import url("bootstrap-custom/bootstrap-danger.css");
@import url("bootstrap-custom/bootstrap-success.css");
@import url("bootstrap-custom/bootstrap-warning.css");

@import url("bootstrap-custom/bootstrap-lemon.css");
@import url("bootstrap-custom/bootstrap-green.css");
@import url("bootstrap-custom/bootstrap-pink.css");
@import url("bootstrap-custom/bootstrap-blue.css");
@import url("bootstrap-custom/bootstrap-purple.css");
@import url("bootstrap-custom/bootstrap-gray.css");
@import url("bootstrap-custom/bootstrap-yellow.css");

:root {
  --primary-color: navy;
  --info-color: darkturquoise;
  --danger-color: firebrick;
  --success-color: forestgreen;
  --warning-color: orange;
  
  --lemon-color: lightyellow;
  --green-color: #9cbb1c;
  --pink-color: #FFA1AF;
  --blue-color: #007dc5;  
  --purple-color: indigo; 
  --gray-color: #606050;
  --yellow-color: #E3C700;
}

/** ページャー **/
/* アクティブなページ */
.page-item.active .page-link {
    background-color: navy;
    border-color: navy;
    color: white; /* テキストの色 */
}
/* ページリンク */
.page-link {
    color: navy;
}
/* ページリンクホバー時 */
.page-link:hover {
    color: white; /* テキストの色 */
    background-color: navy;
    border-color: navy;
}


body {
	font-family: sans-serif;
	line-height: 1.7;
}

.max-width {
	max-width: 1150px;
}

/** アニメーション1 **/
.animation_box1 {
  animation: fadeIn 0.1s ease 1s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/** アニメーション2 **/
.animation_box2 {
  animation: fadeIn 1.5s ease 1s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/** アニメーション3 **/
.animation_box3 {
  animation: fadeIn 3.5s ease 1s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/** アニメーション 点滅（お知らせのNEW） **/
.blinking{
	-webkit-animation:blink 0.7s ease-in-out infinite alternate;
    -moz-animation:blink 0.7s ease-in-out infinite alternate;
    animation:blink 0.7s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/********************************************************************************************************************/
/** 下記、drill **/
/********************************************************************************************************************/

/**********************************************************************/
/* ヘッダー部 */
/**********************************************************************/
.navbar-nav {
    text-align: center; /* レスポンシブ時の中央寄せ */
}
.navbar-nav .nav-item {
    display: inline-block; /* 横並びにする */
    margin-left: 1.5rem;
    position: relative;
}
.navbar-nav .nav-item::before {
    content: '';
    position: absolute;
    bottom: 3.5px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: orange;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.navbar-nav .nav-item:hover::before,
.navbar-nav .nav-item.active::before {
    width: 100%;
}
.navbar-nav .nav-item a {
    text-decoration: none;
    color: #000;
}
.bg-image9 {
	background: linear-gradient(to left top, rgba(255, 250, 205, 0.7),
		/* 黄 */
      rgba(0, 191, 255, 1) /* 青 */
    ), url('/img/header.jpg');
	background-size: cover;
}

.navbar-nav .nav-item.active a {
    color: orange !important; /* 文字色をオレンジに変更 */
}

@media (max-width: 768px) {
    .navbar-nav .nav-item::before,
    .navbar-nav .nav-item:hover::before,
    .navbar-nav .nav-item.active::before {
        display: none; /* スマホの場合、すべての状態で罫線を非表示にする */
    }
    .navbar-nav .nav-item.active a {
        color: orange !important; /* スマホの場合の文字色をオレンジに変更 */
    }
}



/**********************************************************************/
/* （共通）ドリル＆試験 */
/**********************************************************************/
@media only screen and (max-width: 600px) {
    #card-question-answer {
        padding: 5px; /* 任意のパディングに変更 */
    }
}

/**********************************************************************/
/* レッスン */
/**********************************************************************/
.lesson-image-container {
    position: relative;
    height: 200px;
}

.lesson-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* ここで色や透明度を調整可能 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
}

@media only screen and (max-width: 600px) {
    .lesson-card-body {
    	padding : 0px;
        padding-top: 5px; /* 任意のパディングに変更 */
    }
    .lesson-card-body ul {
    	padding-left: 1rem; 
    }
}

/* アニメーションを定義 */
@keyframes animationText {
  0%, 100% {
    text-shadow: 0 0 10px #fff; /* 白色の光 */
    transform: translateX(0px); /* X軸方向の移動 */
  }
  50% {
    text-shadow: 0 0 20px greenyellow; /* 黄色の光 */
    transform: translateX(5px); /* X軸方向の移動 */
  }
}
/* 要素にアニメーションを適用 */
.animation-text {
  animation: animationText 3s 3 alternate; /* アニメーションの適用(アニメーション名、秒、回数) */
  animation-timing-function: ease-in-out; /* アニメーションのタイミング関数を変更 */
}


/**********************************************************************/
/* （共通）テキストエリア入力（レッスン＆ドリルで使用） */
/**********************************************************************/
/* 独自のCSSスタイルを追加 */
.mark {
    padding: 0.15em 0.25em; /* 上下左右の余白を微調整 */
    background-color: #FEFAC1; /* マークの背景色を変更 */
    border-radius: 0.2em; /* 角丸を設定 */
    /*line-height: 1;*/ /* マークの高さを微調整 */
    display: inline-block; /* マークをブロック要素として表示 */
}
.title {
    position: relative;
    padding-left: 20px;
    font-weight: bold;
    padding-top: 2px;
    font-size: 1.5em; /* フォントサイズを1.5倍に設定 */
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: aliceblue;
    
}
/* span要素をタイトルの前に挿入するためbefore定義 */
.title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background-color: #3498db;
}
.title3 {
    position: relative;
    padding-left: 20px;
    font-weight: bold;
    padding-top: 2px;
    font-size: 1.5em; /* フォントサイズを1.5倍に設定 */
    margin-top: 15px;
    margin-bottom: 15px;
    
}
/* span要素をタイトルの前に挿入するためbefore定義 */
.title3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background-color: firebrick;
}

.title4 {
    position: relative;
    padding-left: 20px;
    font-weight: bold;
    padding-top: 2px;
    font-size: 1.4em; /* フォントサイズを1.4倍に設定 */
    margin-top: 15px;
    margin-bottom: 10px;
    
}
/* span要素をタイトルの前に挿入するためbefore定義 */
.title4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background-color: darkgreen;
}

.titleContent {
    margin-left: 25px; /* インデントの幅を設定 */
    margin-bottom: 25px;
    
    /* タブレット以下の場合のスタイル */
    @media (max-width: 768px) {
        margin-left: 15px; /* タブレットサイズ以下では左マージンを変更 */
        margin-bottom: 15px;
    }
}


.subTitle {
	position: relative;
	border-bottom: 5px solid #ddd;
	padding-bottom :2px;
	padding-top :15px;
	margin-bottom :15px;
    font-size: 1.5em; /* フォントサイズを1.5倍に設定 */
    font-weight: bold;
}
.subTitle:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #ffc107;
}
.indent{
    margin-left: 25px; /* インデントの幅を設定 */
    
    /* タブレット以下の場合のスタイル */
    @media (max-width: 768px) {
        margin-left: 15px; /* タブレットサイズ以下では左マージンを変更 */
    }
}

hr.line1 {
	border: none;
	background:  radial-gradient(circle farthest-side, gold, yellow, skyblue);
	height: 10px;
}

.wavy {
  text-decoration: orangered wavy underline; /* 色,波線,線を引く場所を指定 */
  text-underline-offset: 4px; /* 下線の位置を少し下に調整 */
  text-decoration-thickness: 2px; /* 下線の太さを指定 */
}

/** 下記リストはBootStrapのclass指定のため、削除予定 **/
.item {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
/*  border: dotted 0.5px gray; */ /*線の種類 太さ 色*/
}
.item li {
  line-height: 1.5; /*文の行高*/
  padding: 0.2em 0; /*前後の文との余白*/
}

/**********************************************************************/
/* （共通）prism.jsのcode/preタグ内のスタイル */
/**********************************************************************/
pre[class*=language-].line-numbers {
	padding-left :3.5em;
	padding-top :1.15em; /* ハイライト時のズレ微調整 */
}
pre.line-numbers{
	margin-top: 0;
}
.line-highlight {
  background-color: yellow !important;
  opacity: 0.15; /* 透明度の設定 */
}

pre[class*=language-] {
  font-size: 0.8em;
}
@media only screen and (max-width: 600px) {
    pre.line-numbers {
        font-size: 10px;
    }
    code[class*="language-"] {
        font-size: 10px;
    }
}



/**********************************************************************/
/* ヘッダーにあったプロフィールCSS */
/**********************************************************************/
    .profile-initial {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .initial {
        font-size: 12px;
        color: #fff;
    }

	.profile-image {
	    width: 25px; /* 画像の幅 */
	    height: 25px; /* 画像の高さ */
	    border-radius: 50%; /* 丸みを帯びた形にするための円形の枠線 */
	    object-fit: cover; /* 画像を枠線内に収め、アスペクト比を保持 */
	}

	.review-text {
		font-size: 12px;
	}
	textarea.form-control {
		font-size: 12px;
	}

/**********************************************************************/
/* 画像検索アイコンを消す */
/**********************************************************************/
	img {
    	pointer-events: none;
	}

/**********************************************************************/
/* フッター */
/**********************************************************************/
	/** コンテンツ量が少なくてもフッターを一番下に配置 **/
	html, body {
		height: 100%;
	}
	body > footer {
	  position: sticky;
	  top: 100vh;
	}
	
/**********************************************************************/
/* codeのあとiframeを記述して、実行結果のブラウザプレビュー用 */
/**********************************************************************/
iframe {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-bottom: 20px;
}