@charset "UTF-8";

/* .zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  .kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* ====================================================
 * 共通リセットと変数定義
 * ==================================================== */
/* 基本リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画像のリセット */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  /* 標準の文字色（濃い茶色/濃い灰色） */
  color: #332714;
  background-color: #f1a6cb;

  /* ★★★ レスポンシブ無効化のための設定 ★★★ */
  min-width: 1024px;
  /* これにより、画面が小さくなっても横スクロールが発生し、レイアウトは崩れない */
}

:root {
  --dino-move-duration: 0.5s;
  /* テーマカラー */
  --color-math: #06B6D4;
  --color-science: #10B981;
  --color-japanese: #EC4899;
  --color-english: #EF2805;
  --color-social: #FBBF24;
  --color-art: #9370db;

  /* レイアウト寸法 */
  --color-footer: #C7AD87;
  --footer-height: 50px;
  --nav-width: 120px;
  /* 恐竜が雲の中に移動したため、メインコンテンツ下のパディングは調整が必要 */
  --cloud-area-min-height: 850px;
}

/* ----------------------------------------------------
 * 全体的なコンテナ設定
 * ---------------------------------------------------- */
.page-wrapper {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f1a6cb;
  /* 緑色の背景色 */
}

.main-content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* 右側ナビゲーションとフッターのロゴエリア分のスペースを空ける */
  padding-right: var(--nav-width);
  padding-bottom: 10px;
  /* 雲の底と質問リストの下部に最低限のスペース */
}

.top-page {
  position: relative;
  margin-bottom: 0;
  /* ↓↓↓ 修正点：区切りラインを追加 ↓↓↓ */
  border-bottom: 3px solid #e0f7fa;
  /* 濃い茶色の太い線 */
  padding-bottom: 50px;
  /* ラインと雲エリアの間に少しスペースを確保 */
}

/* ページトップのタイトル */
.page-title {
  padding: 50px 0 20px 0;
  text-align: center;
  color: #333;
  /* デフォルトの文字色を調整 */
  background-color: transparent;
  /* 背景色はコンテナに任せる */
}

/* ページタイトルとメッセージ全体をラップするコンテナ */
.title-box-wrapper {
  width: 100%;
  max-width: 900px;
  /* 全体の幅を制限 */
  margin: 0 auto;
  padding: 20px;
}

/* ----------------------------------------------------
 * メッセージボックス (最上部の説明文) の装飾
 * ---------------------------------------------------- */


.message-box {
  /* 白に近い半透明背景 */
  background-color: #fff;
  border: none;
  padding: 35px 50px;
  border-radius: 20px;

  /* 柔らかい影 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-bottom: 50px;
  text-align: center;
  color: #444;
  position: relative;
  overflow: visible;
}

/* ====================================================
 * 個別ページ ロゴマーク (message-box内の左上)
 * ==================================================== */

/* ロゴマーク（<a>タグ）のスタイル */
.header-logo-math {
  position: absolute;
  /* message-boxを基準に絶対配置 */
  top: -20px;
  /* 張り紙の上端から少しはみ出す */
  left: -30px;
  /* 張り紙の左端から少しはみ出す */
  z-index: 20;
  /* 張り紙や文字よりも手前に */
}

/* ロゴ画像（<img>）のサイズ */
.header-logo-math img {
  display: block;
  width: 120px;
  /* ロゴのサイズを調整 */
  height: auto;

  /* ★ お好みでロゴにも影を付ける ★ */
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));

  /* ロゴが message-box の回転の影響を受ける場合は、逆回転で打ち消す */
  /* transform: rotate(1deg); */
}

/* ====================================================
 * スピノサウルス画像の絶対配置 (張り紙ボックスの右下)
 * ==================================================== */
.dino-message-img-spino {
  /* ★★★ 修正箇所 3: 絶対配置にする ★★★ */
  position: absolute;

  /* ★★★ 修正箇所 4: 位置の指定 (右下) ★★★ */
  right: -160px;
  /* 右端から外側へ 50px はみ出す */
  bottom: -60px;
  /* 下端から外側へ 80px はみ出す */

  /* ★★★ 修正箇所 5: サイズの指定 ★★★ */
  width: 300px;
  /* 画像の大きさを調整 */
  height: auto;

  /* 必要に応じて、手前に持ってくる */
  z-index: 10;

  /* メッセージボックスの回転の打ち消し（イラストはまっすぐにしたい場合） */
  /* 親要素の-1deg回転を打ち消すために、逆の1degを適用 */
  transform: rotate(1deg);
  filter: drop-shadow(8px 8px 15px rgba(0, 0, 0, 0.4));
}

.message-box h1 {
  font-family: "Kosugi Maru", sans-serif;
  color: #e20a76;
  margin-top: 0;
  margin-bottom: 30px;
  border-bottom: 3px solid #f99;
  /* 明るい赤系の線 */
  display: inline-block;
  padding-bottom: 8px;
  font-size: 2.4rem;
  line-height: 1.2;
}

.message-box p {
  line-height: 1.7;
  font-size: 1.1rem;
  max-width: 750px;
  margin: 0 auto;
}

/* サブタイトルエリア（main-message-box） */
.main-message-box {
  /* サブタイトルを強調するための濃い背景色 */
  background-color: transparent;
  padding: 120px 30px 10px 30px;


  text-align: center;
  color: #fff;
}

.main-message-box .sub-title {
  font-size: 40px;
  color: #fff;
  border-bottom: 2px solid #fff;
  display: inline-block;
  padding-bottom: 5px;
  font-weight: bold;
  line-height: 1.5;
}

/* サブタイトルの下の本文の文字色を調整 */
.main-message-box p {
  color: #fff;
  /* 濃い文字色で読みやすく */
  margin-top: 10px;
  /* タイトルとの間隔 */
  font-size: 1.2rem;
}

/* ----------------------------------------------------
 * 固定要素: ナビゲーション、TOPボタン、フッター
 * ---------------------------------------------------- */

/* 右端の教科ナビゲーション (固定) */
.nav-content.fixed-right {
  position: fixed;
  top: 50%;
  right: 20px;

  transform: translateY(-50%);

  z-index: 900;
  width: 110px;
  max-height: 90vh;
  /* ★★★ Flexboxで縦並びと右揃えを定義 ★★★ */
  display: flex;
  flex-direction: column;
  /* 縦に並べる */
  align-items: flex-end;
  overflow-y: auto;
  /* コンテナ内で全ての要素を右端に揃える */
  gap: 15px;
  padding: 10px 0;
  /* 要素間の縦の基本間隔 (navとTOPボタン以外) */
}

/* スクロールバーが右端に出た場合に、ボタンが左にずれないように調整 */
/* スクロールバーの色やデザインは必要に応じて調整 */
.nav-content.fixed-right::-webkit-scrollbar {
  width: 5px;
}

.nav-content.fixed-right::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

/* subject-nav と TOPボタンの間にも gap が適用されますが、
   TOPボタンに大きなマージンを設定して上書きします。 */
.subject-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
  /* 教科ボタン間の間隔を subject-nav 内で設定 */
}

/* ナビゲーションボタンの共通スタイル */
.fluid {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Kosugi Maru", sans-serif;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.2rem;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0.7;
  transition: opacity 0.2s, box-shadow 0.2s;
  border-radius: 50%;
  /* すべて円形 */
}

/* 教科ごとのサイズと色 */
.math {
  background: var(--color-math);
  width: 60px;
  height: 55px;
}

.science {
  background: var(--color-science);
  width: 65px;
  height: 60px;
}

.japanese {
  background: var(--color-japanese);
  width: 95px;
  height: 100px;
}

.english {
  background: var(--color-english);
  width: 55px;
  height: 60px;
}

.social {
  background: var(--color-social);
  width: 55px;
  height: 48px;
}

.art {
  background: var(--color-art);
  width: 60px;
  height: 58px;
}

.fluid:hover,
.fluid.active {
  opacity: 1.0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* TOPボタンのスタイル (nav-content 内の要素として定義) */
#top-button {
  /* ★★★ 修正点 3: 独立した位置指定を削除し、Flexboxの配置に任せる ★★★ */
  /* position: fixed; や bottom/right/transform の設定は削除 */

  /* ★★★ 修正点 4: 他のナビゲーションボタンとの間に大きな間隔を空ける ★★★ */
  margin-top: 10px;

  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 50%;

  /* 中のコンテンツ（画像と文字）を中央揃えにするためのFlexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;



}

#top-button:hover {
  background-color: #f0edea;
}

/* TOPボタン内の画像サイズ調整 */
#top-button img {
  width: 100%;
  /* 画像を小さく */
  height: auto;
  display: block;
  margin-bottom: 2px;
}

/* フッター (固定) */
.page-footer.fixed-bottom {
  position: fixed;
  bottom: 0;
  /* max-widthのコンテンツを中央に固定 */
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  max-width: 1200px;
  /* page-wrapperの最大幅に合わせる */
  height: var(--footer-height);
  background-color: var(--color-footer);
  z-index: 950;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* ★★★ 追加箇所: フッターのテキストエリアのスタイル ★★★ */
.footer-text-area {
  /* ロゴとテキストの間に少し隙間を作る */
  margin-left: 20px;

  /* テキストスタイル */
  font-family: "Kosugi Maru", sans-serif;
  font-size: 0.7rem;
  color: #fff;
  /* 背景色に合わせて文字色を白に（フッターの背景が濃い色だと仮定） */
  line-height: 1;
  text-align: center;
}

.footer-text-area p {
  margin: 0;
}

/* ----------------------------------------------------
 * 雲と質問エリア (.cloud-area)
 * ---------------------------------------------------- */
.cloud-area {
  position: relative;
  padding-top: 50px;
  display: flex;
  justify-content: center;
  z-index: 30;
}

.large-cloud {
  position: relative;
  /* 恐竜の配置基準 */
  background-image: url('../img/bg_cloud.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  width: 80%;
  max-width: 1000px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cloud-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-illustration {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  z-index: 20;
}

/* 質問リスト (.question-list) */
.question-list {
  position: absolute;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
}

.question-item {
  position: absolute;
  width: 200px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s;
}

.question-item a {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: #332714;
  display: block;
}

.question-item span {
  display: block;

  font-weight: bold;
  margin-bottom: 5px;
  color: #EF2805
}

/* 質問の位置調整 (画像 f6f51f.jpg に基づく) */
#q-1 {
  top: 18%;
  left: 20%;
  transform: rotate(-8deg);
}

#q-2 {
  top: 15%;
  right: 20%;
  transform: rotate(5deg);
}

#q-3 {
  top: 35%;
  left: 15%;
  transform: rotate(3deg);
}

#q-4 {
  top: 30%;
  right: 15%;
  transform: rotate(-5deg);
}

#q-5 {
  top: 61%;
  left: 20%;
  transform: rotate(-2deg);
}

#q-6 {
  top: 62%;
  right: 20%;
  transform: rotate(8deg);
}

.question-item:hover {
  transform: scale(1.05) rotate(inherit);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------
 * 恐竜ユニット (雲の周りへ絶対配置)
 * ---------------------------------------------------- */

/* 恐竜ユニットの初期設定 */
.dino-unit {
  position: absolute;
  /* 親要素の.large-cloudを基準に絶対配置 */
  pointer-events: all;
  transition: transform 0.3s ease-out, filter 0.3s;
  z-index: 50;

}

/* ★★★ ホバー時の動きと影の追加 ★★★ */
.dino-unit:hover {
  /* 恐竜に影をつけ、浮いているように見せる */
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4));

  /* 影の適用と同時に、少しだけ上に移動させる (静かな浮上) */
  transform: translateY(-5px);
  cursor: pointer;
}




.dino-speech-bubble {
  position: absolute;
  /* 吹き出しの基本デザイン */
  background: #e9f3ef;
  /* color: #332714; */
  /* border: 1px solid #332714; */
  border-radius: 30px;
  padding: 10px 15px;
  width: 150px;
  /* 吹き出しの幅 */
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  z-index: 100;

  /* 恐竜からの相対位置を設定 (例: 頭の上) */
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  /* 中央寄せと少し上の位置に調整 */

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

/* 吹き出しの三角部分 (疑似要素で作成) */
.dino-speech-bubble::after {
  content: '';
  position: absolute;
  /* border: 1px solid transparent; */
  border-top-color: #332714;
  /* 枠線と同じ色 */
  bottom: -22px;
  /* 吹き出しの底から下へ */
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
}

.dino-speech-bubble::before {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top-color: #e9f3ef;
  /* 背景色と同じ色 */
  bottom: -18px;
  /* 枠線の内側に入るように調整 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 102;
  /* 吹き出し本体より前面に */
}

/* ホバー時の表示 */
.dino-unit:hover .dino-speech-bubble {
  opacity: 1;
  visibility: visible;
}


/* 恐竜の個別配置 (雲の周り) */
#dino-ptera {
  width: 250px;
  top: 20px;
  left: -5%;
  z-index: 55;
}

#dino-sutego {
  width: 230px;
  top: 300px;
  left: -10%;
  bottom: 50px;
  z-index: 54;
}

#dino-archeo {
  width: 160px;
  top: 100px;
  right: 0%;
  z-index: 51;
}

#dino-tyrano {
  width: 280px;
  bottom: 100px;
  right: -15%;
  z-index: 53;
}

#dino-brachio {
  width: 350px;
  bottom: 50px;
  left: -110px;
  z-index: 60;
}

#dino-para {
  width: 270px;
  top: 0px;
  right: -15%;
  top: auto;
  z-index: 50;
}

/* ここから解説ページその1 */
/* /* ====================================================
 * 回答ページ用コンテンツのスタイル (トップページの下に続くセクション)
 * ==================================================== */

.answer-page-container {
  /* 雲エリアとの間に適切な間隔を開ける */
  padding-top: 50px;
  padding-bottom: 300px;

  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  z-index: 40;
}

/* ⭐ 変更点: セクションタグに対応するスタイル調整 */
.answer-page-container section {
  /* #q-1-answer, #q-2-answer など */
  margin-top: 50px;
  /* 各セクション間の間隔 */
  padding: 20px;
  background-color: #f7f7f7;
  /* 回答セクションの背景色例 */
  border-radius: 10px;
}

/* ----------------------------------------------------
 * 白い枠のスタイル (.main-answer-box)
 * ---------------------------------------------------- */
.main-answer-box {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 30px 40px;

  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  position: relative;
  z-index: 50;
}


/* ----------------------------------------------------
 * 回答ページ タイトルと2カラムレイアウト
 * ---------------------------------------------------- */

.answer-header {
  text-align: center;
  padding: 10px 0;
  margin-bottom: 30px;
}

.answer-header h2 {
  font-size: 2rem;
  color: #332714;
  border-bottom: 3px solid var(--color-math);
  display: inline-block;
  padding-bottom: 5px;
}

.answer-body {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}

.explanation-section,
.message-section {
  width: 50%;
  padding: 20px;
  border-radius: 10px;
}

.explanation-section h3 {
  color: var(--color-math);
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.explanation-section p,
.message-section p {
  margin-bottom: 10px;
  line-height: 1.6;
}



.message-section {
  background: #e0f7fa;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dino-message-img {

  width: 80%;
  height: auto;
  margin-top: 10px;
}

/* ====================================================
 * 回答ページ タイトル補足セリフ
 * ==================================================== */

.question-catchphrase {
  /* 見出しとセリフの間のスペースを調整 */
  margin-bottom: 5px;

  /* フォントスタイル */
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  color: #EC4899;
  /* 恐竜ナビの日本語(Japanese)の色など、強調したい色を使う */

  /* 中央揃えは親要素の .answer-header で適用済み */
}

/* h2との距離を微調整 */
.answer-header h2 {
  margin-top: 5px;
  /* セリフとの間に少しスペースを空ける */
  font-size: 2rem;
  color: #332714;
  border-bottom: 3px solid var(--color-math);
  display: inline-block;
  padding-bottom: 5px;
}

/* ====================================================
 * Q1ページ専用の装飾アイテムの配置
 * ==================================================== */

/* Q1セクション内にある装飾要素の共通設定 (必要に応じて) */
.q1-decoration-items img {
  position: absolute;
  /* 恐竜ナビの z-index: 990 より低く、コンテンツよりは高く (例: 100) */
  z-index: 100;
  pointer-events: none;
  /* コンテンツのクリックを邪魔しないように */
}

/* 男の子のイラスト (例: 右下隅に配置) */
#science_boy-img {
  width: 220px;
  /* サイズ調整 */
  bottom: 20px;
  /* 下へ移動 (白い枠の下端から30px下) */
  right: 70px;
  /* 右端から50px内側 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  /* 影を追加 */
}


/* ----------------------------------------------------
 * アコーディオン (計算セクション) スタイル
 * ---------------------------------------------------- */

.accordion-item {
  background: transparent;
  border-radius: 10px;
  box-shadow: none;
  margin-bottom: 50px;
  border: 1px solid #ddd;
}

.accordion-header {
  background: var(--color-math);
  color: #fff;
  padding: 20px 300px 20px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-radius 0.3s;
}

.accordion-item.open .accordion-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion-icon {
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.3s;
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  display: none;
  overflow: hidden;

  padding: 0 30px;
}

.calc-inner-content {
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}

/* ★★★ 以下の新しいスタイルを追加 ★★★ */
.calc-inner-content p {
  margin-bottom: 2em;
  /* 1行分のスペースを追加 (font-sizeに依存) */
  line-height: 1.5;
  /* 行間の調整（もし必要なら） */
}

/* ただし、問題の公式の部分はスペースを空けすぎないように調整 */
.calc-inner-content p:first-child {
  margin-top: 0;
}

.calc-inner-content h4 {
  color: var(--color-math);
  margin-top: 30px;
  margin-bottom: 15px;
  border-bottom: 2px dashed #ccc;
  display: inline-block;
  padding-bottom: 5px;
}

.problem-box {
  background: #fffbe6;
  border: 1px solid #f0e68c;
  padding: 15px;
  border-radius: 5px;
  margin: 20px auto 30px;
  width: 100%;
  text-align: left;
  font-size: 20px;
  text-align: center;
}

/* ====================================================
 * 恐竜ナビゲーションライン（回答ページでのみ画面下部に固定）
 * ==================================================== */

/* 恐竜ライン全体の固定コンテナ */
.dino-line-wrapper.fixed-answer-nav {
  position: fixed;
  /* フッター (fixed-bottom) の高さ分だけ上に配置 */
  bottom: var(--footer-height, 40px);

  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  max-width: 1200px;
  height: 100px;
  z-index: 990;

  /* background-color: #C7AD87; */
  /* box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.2); */
}

/* 恐竜を内側に配置するコンテナ */
.dino-line-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 950px;
  margin: 0 auto;

  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 20px;
}

/* 個々の恐竜ユニット */
.dino-line-unit {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  pointer-events: all;
  width: 15%;
  min-width: 60px;
  text-align: center;
  transform: translateY(15px);
}

.dino-line-unit a {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  text-decoration: none;
  transition: transform 0.2s;
}

.dino-line-unit a:hover {
  transform: translateY(10px);
}

/* 恐竜画像 */
.dino-line-img {
  height: 80px;
  width: auto;
  margin: 0 auto;
  display: block;
  margin-bottom: 0px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

/* ----------------------------------------------------
 * 恐竜の吹き出し（ホバー時表示）
 * ---------------------------------------------------- */

.dino-line-bubble {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);

  background: #fff;
  color: #332714;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 1000;
}

/* ホバー時に吹き出しを表示 */
.dino-line-unit a:hover .dino-line-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -5px);
}

/* ここまで解説ページその1 */