/* もくじ */
/* ページタイトル */
h1 {
    text-align: center;
    margin-bottom: 1em;
}
/* もくじ */
.midashi {
  position: relative;
  padding: 1rem .5rem;
  font-size: 40px;
  display: inline-block; /* アニメーションを適用するために必要 */
}

.midashi:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%; /* 初期状態では幅を0に */
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
  transition: width 1s ease-out; /* アニメーションの設定 */
}

/* ページ読み込み時にアニメーションを適用 */
.midashi.loaded::after {
  width: 100%; /* アニメーション後、幅が100%に */
}

/* 目次全体（ノート風・コンパクト） */
.toc-001 {
    padding: 0.9em 1.4em 1em 1.4em;
    border-top: 1px solid #d9d9d9;
    border-right: 0;
    border-bottom: 1px solid #d9d9d9;
    border-left: 24px solid #99ccb7;
    background-color: #f7f7f7;
    color: #333333;
    box-shadow:
        1px 0 0 #959595d4,
        2px 0 0 #fff,
        3px 0 0 #898989de,
        4px 0 0 #fff,
        5px 0 0 #858585de,
        9px 3px 10px #ababab96;
    width: 62%;
    max-width: 480px;
    margin: 0 auto;          /* 箱自体も中央 */
    text-align: left;        /* 中身は左揃え */
}

/* 「目次」 */
.toc-001 > div {
    display: block;
    text-align: center;
    margin: 0;
    padding: 4px 0;
    font-size: 1.45em;
    font-weight: bold;
    color: #4a4a4a;
    border-bottom: 4px solid #99ccb7;
}

/* リスト全体 */
.toc-001 ol {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

/* 各項目 */
.toc-001 li {
    padding: 8px 0;
    margin-left: 1.8em;
    position: relative;
    font-size: 1.15em;
    color: #5a5a5a;
}

/* 先頭の「・」を縦中央に */
.toc-001 li::before {
    content: "・";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #99ccb7;
    font-size: 1.35em;
    line-height: 1;
}

/* サブ階層 */
.toc-001 ol ol {
    margin-top: 4px;
    margin-left: 1.4em;
}

/* リンク */
.toc-001 a {
    color: #166c9d;
    text-decoration: none;
    background: linear-gradient(
        transparent 0,
        transparent 94%,
        #d8d8d8 100%
    );
    background-size: 100% 2em;
    line-height: 2em;
}

/* ホバー */
.toc-001 a:hover {
    color: #004a6d;
    text-decoration: underline;
}
mark {
    background-color: gold;
    color: black; 
}
.mini-btn {
    position: relative;           /* explanationを絶対位置で出すため */
    display: inline-block;
    background-color: gold;
    color: black;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.mini-btn:hover {
    transform: translateY(-2px);
}

/* 説明を初期非表示 */
.mini-btn .explanation {
    position: absolute;
    bottom: -35px;               /* ボタン下に表示 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff8dc;   /* 薄いクリーム */
    color: #555;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;        /* ホバー中だけ見せる */
    transition: opacity 0.3s, bottom 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* hover時に表示 */
.mini-btn:hover .explanation {
    opacity: 1;
    bottom: -45px;               /* 少し下にスライド */
}

/* 生徒ナビゲーション */
.student-mokuji {
	display: flex;
	width: fit-content;   /* 要素の内容にぴったりあう幅にする */
    margin: 0 auto;       /* 上下の余白を０にして、左右の余白を自動にする（中央ぞろえ）*/
    font-size: 20px;
}
/* 生徒ナビゲーションここまで */

/*生徒*/

/* 続きを読む */

.cp_box1 {
  position: relative;
  width: fit-content;   /* 要素の内容にぴったりあう幅にする */
  margin: 0 auto 50px;       /* 上下の余白を０にして、左右の余白を自動にする（中央ぞろえ）*/
}
.cp_box1 input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* ボタンを下に寄せる */
  z-index: 10;/* 重なり順を強くする */
  bottom: 0;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(224, 255, 255, 0) 0%, rgba(224, 255, 255, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label {
  background: inherit;
}
.cp_box1 input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container {
  overflow: hidden;
  height: 250px; /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before {
  content: '';
  position: absolute;
  line-height: 2.5rem;
}
.cp_box1 label:after {
  content: '続きをよむ';
  display: block;
  pointer-events: auto;       /* ←重要：ボタン部分だけクリックに反応させる */
  position: relative;         /* absoluteから変更して位置を安定させる */
  z-index: 2;
  bottom: 20px;
  width: 13em;
  color: #ffffff;
  background: #333333;
  border-radius: 20px; /*要素の四隅を丸くする*/
}
.cp_box1 label::before {
  position: absolute; /* 要素の配置方法を指定 */
  bottom: 38px;
  left: calc(50% - 3.5em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after {
  content: '閉じる';
}
.cp_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}


/* ユーザーアイコン */
.user-icon {
  width: 50px;       /* ←ここ変えれば全体が縮む！ */
  height: 50px;
  border-radius: 50%;
  background: #ccc;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

/* 白い“人の形”を%で指定して、サイズに連動させる */
.user-icon::before,
.user-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: white;
}

/* 頭（アイコンの大きさに応じて縮む！） */
.user-icon::before {
  width: 40%;       /* ←丸の 40% */
  height: 40%;
  top: 13%;         /* 位置も%で調整 */
  border-radius: 50%;
}

/* 体 */
.user-icon::after {
  width: 55%;        /* ←丸の 55% */
  height: 28%;
  top: 55%;
  border-radius: 50% 50% 0 0;
}

/* ── 色バリエーション ── */
.blue   { background: #4d9fff; }
.green  { background: #4ecb71; }
.purple { background: #b28dff; }
.yellow { background: #ffd93d; }

/* 生徒の全体のカード */
.comment-card {
  background: #f8f8f8;
  border-radius: 16px;
  border: 1px solid #ddd;
  padding: 16px;
  width: 1000px;
}

/* 先生の全体のカード */
.comment-card2 {
  margin-bottom: 100px;
  background: #f8f8f8;
  border-radius: 16px;
  border: 1px solid #ddd;
  padding: 16px;
  width: 900px;
}

/* --- アイコン＋理由を1行にまとめる --- */
.reason-row {
  display: flex;
  align-items: center;
  gap: 10px;          /* アイコンとのスキマ */
  margin-bottom: 10px;
}

/* 理由の文字 */
.reason {
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  z-index: 2; 
}

/* ランキング */
.list_crown {             /* 「・」を消す */
    list-style: none;
    width: fit-content;   /* 要素の内容にぴったりあう幅にする */
    margin: 0 auto;       /* 上下の余白を０にして、左右の余白を自動にする（中央ぞろえ）*/
}

.list_crown > li {            /* .list_crownより下のliの設定 */
    position: relative;       /* <li>の中に疑似要素「::before」と「::after」(対象要素の内部に挿入される仮想のボックス)が配置されるようになる設定 */
    padding-bottom:20px;
    padding-left: 2.8em;      /* 王冠アイコンのためのスペース */   /* 1em = ここの要素のfont-size */
    color: #3388dd;
    font-size: 30px;
}

.list_crown > li::before,
.list_crown > li::after {     /* 疑似要素の下準備*/
    position: absolute;       /* 親要素（.list_crown>li)の左上を基準に疑似要素が配置されるようになる設定 */
    left: 0px;                /* 基準位置をliの左端にそろえる */
    width: 0px;               /* borderで図形を作るために疑似要素本体のサイズをゼロにする */
    height: 0px;
    content: "";              /* 疑似要素に空の内容を与える */
}

.list_crown > li::before {                      /* .list_crownの中にあるli::beforeで三角形を描く */
    top: -1.25em;                               /* 三角形がテキストより上にくるようにする */
    border: 1em solid transparent;              /* 四方向の各辺を1emの幅ですべて透明にする */
    border-bottom: 1.5em solid currentColor;    /* 下側だけliの文字色と同じ色を付けて幅を1.5emにする→下向きの三角形 */
}

.list_crown > li::after {                       /* .list_crownの中にあるli::afterで王冠の下側につくギザギザ部分（小さな三角形２つ）を描く */
    top: 0.25em;                                /* 三角形がテキストより少し下にくるようにする */
    border: 0.5em solid transparent;            /* 四方向の各辺を0.5emの幅ですべて透明にする */
    border-left: 1em solid currentColor;        /* 左側をliの文字色と同じ色を付けて幅を1emにする→左向きの三角形 */
    border-right: 1em solid currentColor;       /* 右側をliの文字色と同じ色を付けて幅を1emにする→右向きの三角形 */
}

.list_crown > li:nth-of-type(1) {      /* .list_crownより下の最初のliの設定 */
    color: #dbb400;
}
.list_crown > li:nth-of-type(2) {      /* .list_crownより下の２番目のliの設定 */
    color: #9fa0a0;
}
.list_crown > li:nth-of-type(3) {      /* .list_crownより下の３番目のliの設定 */
    color: #c47022;
}

/* 先生の中央ぞろえ */
.center {
	width: fit-content;
    margin: 0 auto;
}

/* 小見出し */
h3{
	margin-top: 50px;
	margin-bottom:35px;
	margin-left:100px;
	margin-right:100px;
	background-color:khaki;
	padding: 1rem 2rem;
 	border-bottom: 3px solid #dcdcdc;
	border-left: 5px solid #000;
	background: #f4f4f4;
 	border-radius: 3px;
 	box-shadow: 0 0 8px rgba(0,0,0,.4);
 	text-align:center;
}

.class-mokuji {
	width: fit-content;
    margin: 0 auto;
}