@charset "utf-8";

/* ------------------------------
   要素セレクタ
------------------------------ */

/* h4 見出しのデザイン */
h4 {
  font-size: 1.1em; /* 見出し4を少し大きめにして強調 */
}

/* 段落のデザイン */
p {
  margin-bottom: 0px; /* 段落間の余白をなくして詰める */
  font-size: 14px;    /* 読みやすい標準文字サイズに設定 */
}

/* リンクのデザイン */
a {
  cursor: pointer; /* マウスカーソルを「指」にしてクリック可能感を出す */
}


/* ------------------------------
   クラスセレクタ
------------------------------ */

/* 中央揃え（テキスト＋flex 子要素の中央寄せ） */
.cntr {
  text-align: center;  /* テキストを中央揃え */
  align-items: center; /* flex 子要素を縦方向中央揃え（親が flex の場合） */
}

/* 左揃え */
.lft {
  text-align: left; /* テキストを左揃え */
}

/* 下揃え（表セルなどで使用） */
.under {
  vertical-align: bottom; /* インライン要素・表セルを下揃えにする */
}

/* 問題番号の文字サイズ調整 */
.number {
  font-size: 1.1em; /* 問題番号を少し大きくして強調 */
}

/* 自動生成問題（autoQes）の背景色 */
.indexAutoQes {
  background-color: #fee8d1; /* 薄いオレンジ系の背景色で識別しやすくする */
}

/* ----------------------------------------
   数学用フォント（MathML / MathJax 用）
   役割ごとにフォントを分けて視認性を上げる
---------------------------------------- */

/* 数字・通常の数値部分に使うフォント */
.num {
  font-family: "Noto Sans", sans-serif; /* 読みやすく癖のないサンセリフ体 */
  font-size: 16px;                      /* 標準的な数学フォントサイズ */
}

/* 記号（＋−×÷＝など）に使うフォント */
.sign {
  font-family: "Inter", "Noto Sans", sans-serif; /* 記号が太く綺麗に見える Inter を優先 */
  font-weight: bold;                              /* 記号を強調して視認性を上げる */
  font-size: 16px;                                 /* 数字と揃えたサイズ */
}

/* 変数（x, y, a, b など）に使う筆記体フォント */
.var {
  font-family: "Dancing Script", cursive; /* やわらかい筆記体で変数を表現 */
  font-size: 18px;                        /* 筆記体は小さく見えるため +2px 補正 */
}

/* ----------------------------------------
   ボタン配置やレイアウト補助クラス
---------------------------------------- */

/* ボタン全体の外側余白（上下左右に10px） */
.updateButton {
  margin: 10px; /* ボタン群を周囲から少し離すための余白 */
}

/* 大きめの文字サイズを適用するためのクラス */
.fontSizeBig {
  font-size: 25px; /* 強調したい文字に使う大きめフォント */
}

/* 横並びレイアウト用のコンテナ */
.rowContainer {
  display: flex; /* 子要素を横方向に並べる */
}

/* 縦並びレイアウト用のコンテナ */
.colContainer {
  display: block; /* 子要素を縦方向に並べる（通常のブロック表示） */
}

/* 小さい画像用（アイコンなど） */
.imgSmall {
  width: 25px; /* 小さなアイコンサイズに統一 */
}

/* 枠付きの大きな表示ボックス */
.frame {
  border: 2px solid black; /* 太めの黒枠で囲んで強調 */
  font-size: 25px;         /* 中の文字を大きく表示 */
  background-color: white; /* 背景を白にして読みやすく */
}

/* タイトル画像の配置調整 */
.titleImage {
  display: block;    /* 画像をブロック要素として扱う（中央寄せしやすい） */
  margin-top: 10px;  /* 上に少し余白をつける */
}

/* 印刷日やリロード回数の表示位置 */
.printDateAndReloadCnt {
  text-align: right; /* 右寄せで情報を揃える */
  padding: 20px;     /* 周囲に余白をつけて読みやすく */
  font-size: 0.85em; /* 少し小さめの文字で控えめに表示 */
}

/* ----------------------------------------
   問題文の基本スタイル
---------------------------------------- */
.qesSentence {
  font-size: 16px; /* 読みやすい標準的な文字サイズ */
}

/* ----------------------------------------
   自己評価枠（大きな外枠）
---------------------------------------- */
.wideBox {
  border: 2px solid black; /* 枠全体を太い黒線で囲んで強調 */
  width: 90%;              /* ページ幅の90%に収める */
  margin: 25px auto 0;     /* 上に25px、左右は中央寄せ、下は0 */
  border-radius: 10px;     /* 角を丸くして柔らかい印象に */
  padding: 5px;            /* 内側に余白をつけて詰まりを防ぐ */
  display: flex;           /* 文章と画像を横並びに配置 */
}

/* 自己評価枠：文章部分（85%） */
.flexSentence {
  width: 85%; /* 枠の大部分を文章エリアに割り当てる */
}

/* 自己評価枠：画像部分（15%） */
.flexImg {
  width: 15%;        /* 画像エリアは全体の15% */
  position: relative; /* 子要素の絶対配置の基準にする */
}

/* 自己評価枠の中の画像（先生アイコンなど） */
.flexImg img {
  position: absolute; /* 親の右下に固定配置 */
  right: 10px;        /* 右端から10px */
  bottom: 5px;        /* 下端から5px */
  width: 50px;        /* 画像サイズを統一 */
}

/* 星マーク（自己評価用） */
.star {
  font-size: 1.5em; /* 星を大きめにして見やすく */
}

/* 先生アイコン（小さめ） */
.teacher {
  width: 25px; /* 小さなアイコンサイズに統一 */
}

/* ----------------------------------------
   答え枠（解答欄の外枠）
---------------------------------------- */
.ansBox {
  border: 2px solid black; /* 太い黒枠で囲んで強調 */
  width: 90%;              /* ページ幅の90%に収める */
  border-radius: 10px;     /* 角を丸くして柔らかい印象に */
  padding: 5px;            /* 内側に余白をつける */
  margin: 25px auto 0;     /* 上に余白＋中央寄せ */
}

/* インデックス用の小さなアイコン */
.indexIcon {
  height: 1.2em; /* 文字サイズに合わせた高さ */
  width: auto;   /* アスペクト比を維持 */
}

/* ----------------------------------------
   ポイント枠（先生のアドバイスなど）
---------------------------------------- */
.pointBox {
  border: 2px solid black; /* 太い黒枠で囲んで強調 */
  border-radius: 10px;     /* 角を丸くして柔らかい印象に */
  padding: 5px;            /* 内側に余白をつける */
  margin: 25px auto;        /* 上に余白をつけて区切りを作る */
  width: 500px;
  display: flex;           /* 文章と画像を横並びに配置 */
}

/* ----------------------------------------
   印刷用スタイル
   → 印刷時に画像がはみ出さないように調整
---------------------------------------- */
@media print {

  @page {
    margin: 3em;
  }

  /* 印刷時、画像がページからはみ出ないように最大幅を制限 */
  img {
    max-width: 100%; /* 用紙幅に合わせて縮小される */
  }

  #printAreaQes,
  #printAreaAns {
    padding: 0 30px;
  }

  .paren {
    font-size: 1.4em;
    line-height: 1;
  }
}


/* ----------------------------------------
   メニューバーの高さを一括管理するための変数
   → PC・スマホで高さを切り替えるための基準値
---------------------------------------- */
:root {
  --menu-height: 30px; /* メニューバーの基本高さ（PC用） */
}

/* ----------------------------------------
   メニューバーが上に固定されるため、
   下のコンテンツが隠れないように余白を確保
---------------------------------------- */
section {
  padding-top: calc(var(--menu-height) + 32px);
  /* 
     var(--menu-height) → メニューバーの高さ
     +32px → 余白（影・上下のマージン分）
     → メニューが重ならず、ちょうど良い位置から本文が始まる
  */
}

/* ----------------------------------------
   メニューバー全体（PC・スマホ共通）
   横並びで、中央寄せ、上部固定のナビゲーション
---------------------------------------- */
.menu-bar {
  max-width: 1000px;
  display: flex;              /* 子要素（ボタン）を横並びにする */
  justify-content: center;    /* 全体を中央寄せに配置 */
  align-items: stretch;       /* 各ボタンの高さを揃える（縦方向に伸ばす） */
  flex-wrap: nowrap;          /* 折り返さず1行に収める（PC用） */

  gap: 6px;                   /* ボタン間の隙間（iPhoneでも安全な値） */
  padding: 0 8px;             /* 左右に少し余白を入れて切れ防止 */
  margin: 12px auto 28px;        /* 上12px、下28px、左右は0（中央寄せのため） */

  background-color: transparent; /* 背景は透明（ページデザインに馴染ませる） */
  height: var(--menu-height);    /* メニューの高さを変数で管理 */

  position: sticky;           /* スクロールしても上に固定される */
  top: 0;                     /* 画面上端に固定 */
}

/* ----------------------------------------
   メニュー項目（ボタン1つ分の枠）
   すべての項目を均等幅にするための設定
---------------------------------------- */
.menu-item {
  flex: 1 1 0;        /* すべての項目を均等に伸ばして同じ幅にする */
  display: flex;  /* 中の a / button を flex で中央寄せしやすくする */
  height: 48px;
}

/* ----------------------------------------
   メニュー内のすべてのボタン（a / dropbtn / back-btn）
   → デザインを完全に統一するための共通スタイル
---------------------------------------- */
.menu-item a,
.menu-item .dropbtn,
.menu-item .back-btn {
  flex: 1;                     /* 親の .menu-item 内で均等に幅を取る */
  display: flex;               /* 中のテキストを中央寄せするため flex に */
  justify-content: center;     /* 横方向の中央寄せ */
  align-items: center;         /* 縦方向の中央寄せ */
  text-align: center;          /* テキストを中央揃えにする */

  background: #ffeef7;         /* 優しいピンク背景（サイトの世界観に合わせる） */
  padding: 8px 6px;            /* 内側の余白（上下8px・左右6px） */
  border-radius: 10px;         /* 角を丸くして柔らかい印象に */
  border: 1px solid #f3d7f3;   /* 薄いピンクの枠線で統一感を出す */
  color: #3a3399;              /* 文字色：落ち着いた青紫 */
  font-weight: 600;            /* 少し太字にしてボタンらしさを出す */
  font-size: 0.85rem;          /* 小さめの文字で可読性とデザインの両立 */
  text-decoration: none;       /* aタグの下線を消す */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影で浮かせる */
  white-space: nowrap;         /* ボタン内の文字が折り返されないようにする */
  cursor: pointer;             /* ホバー時に「指カーソル」にしてクリック感を出す */

  height: 100%;                /* 親の .menu-item の高さに合わせて伸ばす */
}

/* ----------------------------------------
   ホバー時の共通スタイル
   → ボタンに触れたときの視覚的フィードバック
   → a / dropbtn / back-btn のすべてに適用
---------------------------------------- */
.menu-item a:hover,
.menu-item .dropbtn:hover,
.menu-item .back-btn:hover {
  background-color: #ffdff0; /* 通常より少し濃いピンクで「選択中」を示す */
  transform: translateY(-2px); /* ボタンがふわっと浮くようなアニメーション */
}

/* ----------------------------------------
   戻るボタンだけデザインを変えて
   他のメニュー項目と区別しやすくする
---------------------------------------- */
.menu-item .back-btn {
  background-color: #ffe0f1;   /* 通常ボタンより少し濃いピンクで差別化 */
  border: 1px solid #f0c7f0;   /* 枠線も濃いめのピンクにして強調 */
  font-weight: bold;           /* 戻るボタンは特に目立たせるため太字に */
}

/* ----------------------------------------
   戻るボタンのホバー時の色変化
   → 他のボタンより濃い変化で「戻る」だと分かりやすく
---------------------------------------- */
.menu-item .back-btn:hover {
  background-color: #ffcce7;   /* ホバー時はさらに濃いピンクに変化 */
}

/* ----------------------------------------
   ドロップダウンの基礎設定
   → 子要素（dropdown-content）の絶対配置の基準にする
---------------------------------------- */
.dropdown {
  position: relative; /* ドロップダウンメニューの基準位置 */
}

/* ----------------------------------------
   メニュー項目がドロップダウンを持つ場合の設定
   → 他の .dropdown より優先して前面に出す
---------------------------------------- */
.menu-item.dropdown {
  position: relative; /* 絶対配置の基準にする */
}

/* ----------------------------------------
   ドロップダウンを開くボタン（dropbtn）
   → 最前面にしてクリックしやすくする
---------------------------------------- */
.dropbtn {
  position: relative; /* ボタン自身の位置基準 */
  pointer-events: auto; /* クリック可能にする（念のため明示） */
}

/* ----------------------------------------
   ドロップダウンが「開いた状態」
   → display: block で表示、クリックも可能に
---------------------------------------- */
.dropdown-content.show {
  display: block;      /* ドロップダウンを表示 */
  pointer-events: auto; /* 開いたときだけクリック可能にする */
}


/* ----------------------------------------
   ドロップダウン中身（縦に並ぶピンクボタン）
   初期状態では非表示
---------------------------------------- */
.dropdown-content {
  display: none;        /* 初期状態では非表示 */
  position: absolute;   /* 親 (.dropdown) を基準に絶対配置 */
  top: 100%;            /* ボタンの真下に配置 */
  left: 0;              /* 左端を揃える */

  width: max-content;   /* 中身に合わせて横幅を広げる */
  min-width: 100%;      /* ただし最低でも親ボタンと同じ幅にする */

  pointer-events: auto; /* クリック可能（JS制御と併用） */
  padding-top: 6px;     /* ボタンとの間に少し余白 */
  background: transparent; /* 背景は透明（影や枠は子要素で表現） */
  border: none;         /* 外枠なし */
  box-shadow: none;     /* 影なし（子要素に影をつける） */
  overflow: visible;    /* はみ出しを隠さず表示 */
}


/* ----------------------------------------
   ドロップダウン内の項目（ピンクのボタン）
---------------------------------------- */
.dropdown-content div {
  background: #ffeef7;        /* 優しいピンク背景 */
  border: 1px solid #f3d7f3;  /* 薄いピンクの枠線 */
  border-radius: 10px;        /* 角を丸くして柔らかい印象に */

  padding: 7px;
  margin-top: 7px;

  display: block;             /* ブロック要素として幅いっぱいに */
  text-align: center;         /* テキスト中央揃え */
  color: #3a3399;             /* 落ち着いた青紫の文字色 */
  font-weight: 600;           /* 少し太字で見やすく */
  text-decoration: none;      /* 下線なし */

  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影で浮かせる */
  cursor: pointer;            /* クリック可能に見せる */
}

/* ----------------------------------------
   ドロップダウン項目のホバー時
   → 薄い青で「選択中」を分かりやすく
---------------------------------------- */
.dropdown-content a:hover,
.dropdown-content div:hover {
  background: #e8f3ff; /* ホバー時は薄い青に変化 */
}

/* ----------------------------------------
   PC（画面幅 601px 以上）のレイアウト調整
   → スマホとは別の構造でメニューを横一列に並べる
---------------------------------------- */
@media screen and (min-width: 601px) {

  /* ----------------------------------------
     menu-top / menu-bottom の2段構造を
     PC では「段として扱わず」中身だけ並べる
     → display: contents が決定打
  ---------------------------------------- */
  .menu-top,
  .menu-bottom {
    display: contents; /* 親のボックスを消し、子要素だけを並べる */
  }

  /* ----------------------------------------
     PC 時の button（dropbtn など）の完全リセット
     → ブラウザ標準のボタンスタイルを全削除して
        a タグと同じデザインに統一する
  ---------------------------------------- */
  .menu-item button,
  .menu-item a {
    width: 100%;               /* 親 .menu-item の幅いっぱい */
    display: flex;             /* 中央寄せ */
    align-items: center;
    justify-content: center;
    text-decoration: none;     /* 下線なし */
    box-sizing: border-box;    /* 枠線を含めてサイズ計算 */
  }
}

/* ----------------------------------------
   スマホ向けレイアウト（画面幅 600px 以下）
   → メニューを縦並びにし、ボタンを3列に整える
---------------------------------------- */
@media screen and (max-width: 600px) {

  /* ----------------------------------------
     メニューバー全体を縦並びに変更
  ---------------------------------------- */
  .menu-bar {
    display: flex;             /* flex レイアウトを維持 */
    flex-direction: column;    /* 子要素を縦方向に並べる */
    width: 94%;                /* 画面幅より少し小さくして左右に余白 */
    gap: 8px;                  /* ボタン同士の間隔 */
    margin: 20px auto 0;       /* 上に余白＋中央寄せ */
    padding: 0;                /* 余白を消して詰める */
  }

  /* ----------------------------------------
     メニュー項目（1つのボタン枠）
  ---------------------------------------- */
  .menu-item {
   display: flex;             /* 中の a / button を中央寄せ */
    align-items: center;       /* 縦方向中央寄せ */
    justify-content: center;   /* 横方向中央寄せ */
    margin: 0;                 /* 余白を消す（ズレ防止） */
  }

  /* ----------------------------------------
     メニュー内の a / button の共通設定
     → スマホでは幅・高さを100%にしてタップしやすく
  ---------------------------------------- */
  .menu-item button,
  .menu-item a {
    width: 100%;               /* 親 .menu-item の幅いっぱい */
    height: auto;              /* 親の高さに合わせる */
    padding: 0;                /* 内側余白なし（高さ調整のため） */
    display: flex;             /* 中央寄せ */
    align-items: center;
    justify-content: center;
    text-decoration: none;     /* 下線なし */
    box-sizing: border-box;    /* 枠線を含めてサイズ計算 */
  }

  /* ----------------------------------------
     上段・下段の3列レイアウト
     → スマホでは3つのボタンを横並びにする
  ---------------------------------------- */
  .menu-top, 
  .menu-bottom {
    display: flex;             /* 横並び */
    flex-wrap: nowrap;         /* 折り返さない */
    gap: 6px;                  /* ボタン間の隙間 */
    padding: 0 10px;           /* 左右に少し余白 */
  }

  .menu-top {
    margin-top: 30px;          /* 上段だけ少し下げる（見た目調整） */
  }

  /* ----------------------------------------
     3列の幅計算
     → (100% - 隙間20px) / 3 で均等割り
  ---------------------------------------- */
  .menu-top .menu-item,
  .menu-bottom .menu-item {
    flex: 1 1 calc((100% - 20px) / 3); /* 3等分の幅 */
    height: 40px;                      /* スマホ用の高さ */
  }

  /* ----------------------------------------
     スマホ時のボタン内テキスト調整
  ---------------------------------------- */
  .menu-top .menu-item button,
  .menu-top .menu-item a, 
  .menu-bottom .menu-item button,
  .menu-bottom .menu-item a,
  .optionPrint, 
  .jumpLink {
    height: 100%;              /* 親の高さに合わせる */
    font-size: 0.75rem;        /* 小さめ文字で収まりを良くする */
    padding: 0 4px;            /* 横の余白を少しだけ確保 */
  }

  /* ----------------------------------------
     スマホ時のドロップダウン配置
     → ボタンの真下に全幅で表示
  ---------------------------------------- */
  .dropdown-content {
    position: absolute;        /* 親 .dropdown を基準に配置 */
    width: 100%;               /* ボタンと同じ幅に広げる */
    left: 0;                   /* 左端を揃える */
    top: 100%;                 /* ボタンの真下に表示 */
    height: auto;              /* 中身に合わせて高さ可変 */
    box-sizing: content-box;   /* 枠線を含めないサイズ計算 */
  }

  /* ----------------------------------------
     ドロップダウン内の項目（スマホ版）
  ---------------------------------------- */
  .dropdown-content div {
    display: flex;             /* 中央寄せ */
    align-items: center;
    justify-content: center;

    background: #ffeef7;       /* ピンク背景 */
    border: 1px solid #f3d7f3; /* 薄いピンクの枠線 */
    border-radius: 10px;       /* 角丸 */

    margin-bottom: 6px;        /* 項目同士の間隔 */

    color: #3a3399;            /* 青紫の文字色 */
    font-weight: 600;          /* 少し太字 */
    text-decoration: none;     /* 下線なし */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影 */
    cursor: pointer;           /* クリック可能 */
  }

  /* ----------------------------------------
     スマホ時のメニュー高さを再定義
     → PC の 30px → スマホでは 48px に変更
  ---------------------------------------- */
  :root {
      --menu-height: 48px;     /* スマホ用のメニュー高さ */
  }
}


/* ----------------------------------------
   ポケドリ：問題セクション全体
   → 画面中央に配置し、最大幅を600pxに制限
---------------------------------------- */
.mathQesSection {
  margin: 20px auto 0; /* 上に余白＋左右中央寄せ */
  max-width: 600px;    /* 読みやすい行幅に制限 */
}

.rght {
  text-align: right;
  margin: 5px 20px 10px 0;
}

.youtube-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #ffe4ec;
  border: 1.8px solid #ffb6c1; /* 少し濃いピンクの枠線 */
  color: #444;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.youtube-btn:hover {
  opacity: 0.85;
}

/* ----------------------------------------
   タイトル画像（ページ上部の大きな画像）
---------------------------------------- */
.titleImage img {
  width: 100%;          /* 親要素の幅いっぱいに広げる */
  max-width: 500px;     /* ただし最大500pxに制限して巨大化を防ぐ */
  display: block;       /* 画像をブロック要素にして中央寄せしやすく */
  margin: 0 auto 20px;  /* 中央寄せ＋下に余白 */
  border-radius: 10px;  /* 角を丸くして柔らかい印象に */
}


/* ----------------------------------------
   問題文（本文テキスト）
---------------------------------------- */
.qesText {
  font-size: 1.1rem;     /* 少し大きめで読みやすい文字サイズ */
  line-height: 1.7;      /* 行間を広めにして読みやすく */
  margin-bottom: 20px;   /* 下に余白をつけて区切る */
  max-width: 500px;      /* 行幅を制限して読みやすさを確保 */
}


/* ----------------------------------------
   番号の丸（問題番号のバッジ）
---------------------------------------- */
.number {
  background: #b6bbff;   /* 淡い青紫の背景 */
  color: #fff;           /* 白文字でコントラストを確保 */
  padding: 4px 10px;     /* 内側余白で丸みを強調 */
  border-radius: 50%;    /* 完全な丸にする */
  font-weight: bold;     /* 太字で番号を強調 */
}

.memo-area {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 12px;
  position: relative;
  overflow: visible;
  margin-bottom: 20px;
}

.memoCanvas {
  width: 100%;
  height: 100%;
  background: white;
  touch-action: none;
}

.memo-buttons {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
}

.memo-buttons button {
  padding: 4px 8px;
  border-radius: 20px;
  border: none;
  background: #f0f0f0;
  font-size: 12px;
  cursor: pointer;
}

.qesLargeBox {
  background-color: #f7ecff;
  border-radius: 7px;
  margin: 40px 20px;
  padding: 15px;
}

.qesSmallBox {
  background-color: #ebf2ff;
  border-radius: 7px;
  margin: 20px 0;
  padding: 7px;
}

.index {
  border: 2px dashed black;
  display: inline-block;
  width: fit-content;
  padding: 3px;
  margin-left: 10px;
  border-radius: 12px;
}

.index p {
  font-size: 1em;
}

/* ----------------------------------------
   ボタン全体の配置（更新ボタンなど）
   → 中央寄せ・複数ボタンを横並び・折り返し対応
---------------------------------------- */
.updateButton {
  text-align: center;          /* テキスト中央寄せ（保険） */
  margin: 28px 0;              /* 上下に余白をつけて区切る */
  display: flex;               /* 横並びレイアウト */
  justify-content: center;     /* ボタン群を中央寄せ */
  gap: 18px;                   /* ボタン同士の間隔 */
  flex-wrap: wrap;             /* 画面幅が狭いときは折り返す */
}


/* ----------------------------------------
   ピンク系のやさしいボタン（共通デザイン）
---------------------------------------- */
.pinkBtn {
  background: #ffe4ec;         /* やさしいピンク背景 */
  border: 1.8px solid #ffb6c1; /* 少し濃いピンクの枠線 */
  margin-left: 15px;           /* 左に余白（並びの調整） */
  padding: 12px 20px;          /* 押しやすい余白 */
  border-radius: 10px;         /* 角丸で柔らかい印象 */

  font-size: 0.9rem;          /* 少し大きめで読みやすい */
  font-weight: 600;            /* 太めでボタンらしさを出す */
  color: #444;                 /* 落ち着いた濃いグレー */

  cursor: pointer;             /* 指カーソルでクリック感 */
  transition: 0.22s ease;      /* ホバー時のアニメーション */
  box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* ふんわり影 */
}


/* ----------------------------------------
   ホバー時：色を濃くして浮かせる
---------------------------------------- */
.pinkBtn:hover {
  background: #ffd6e5;         /* 少し濃いピンクに変化 */
  border-color: #ff9fb4;       /* 枠線も濃くして強調 */
  transform: translateY(-2px); /* ふわっと浮く */
  box-shadow: 0 4px 8px rgba(0,0,0,0.12); /* 影を強く */
}


/* ----------------------------------------
   押したとき：沈むアニメーション
---------------------------------------- */
.pinkBtn:active {
  transform: translateY(1px);  /* 少し沈む */
  box-shadow: 0 1px 3px rgba(0,0,0,0.15); /* 影を弱く */
}


/* ----------------------------------------
   「次の単元へ」ボタンの外枠
---------------------------------------- */
.nextUnitBox {
  text-align: center;          /* ボタンを中央寄せ */
  margin: 40px 0 20px;         /* 上に広めの余白をつけて区切る */
}


/* ----------------------------------------
   「次の単元へ」ボタン本体
---------------------------------------- */
.nextUnitButton {
  display: inline-block;       /* インライン＋ブロックの扱い */
  padding: 14px 28px;          /* 押しやすい余白 */
  background: #f8d9f0;         /* やさしいピンク（サイトの世界観） */
  color: #751160;              /* アクセントカラーの濃い紫 */
  font-size: 1.1em;            /* 少し大きめで目立たせる */
  font-weight: bold;           /* 太字で強調 */
  text-decoration: none;       /* 下線なし */
  border-radius: 10px;         /* 角丸 */
  border: 2px solid #f4b6e7;   /* 濃いめピンクの枠線 */
  transition: 0.25s;           /* ホバー時のアニメーション */
}


/* ----------------------------------------
   ホバー時：色を濃くして浮かせる
---------------------------------------- */
.nextUnitButton:hover {
  background: #f4b6e7;         /* 濃いピンクに変化 */
  color: #ffffff;              /* 白文字でコントラストUP */
  transform: translateY(-2px); /* ふわっと浮く */
}


/* ----------------------------------------
   スマホ（500px 以下）のときの「次の単元へ」ボタン調整
   → 文字サイズと余白を少し小さくして収まりを良くする
---------------------------------------- */
@media screen and (max-width: 500px) {
  .nextUnitButton {
    font-size: 1em;        /* 少し小さめにして横幅に収める */
    padding: 12px 20px;    /* 余白も縮めてバランス調整 */
  }
}

/* ----------------------------------------
   PC で横並びにするためのコンテナ
---------------------------------------- */
.flexContainer {
  display: flex;          /* 子要素を横方向に並べる（flex レイアウト） */
  align-items: flex-start; /* 子要素の上端を揃える（高さが違っても揃う） */
}

/* ----------------------------------------
   2カラム用の縦並びコンテナ（スマホで縦に崩れる前提）
---------------------------------------- */
.halfContainer {
  display: block;                     /* 通常のブロック要素として扱う */
  flex: 1 1 calc(50% - 20px);         /* 横並び時：幅50%から余白分を引いたサイズにする */
  /* 
     flex: 1 1 ... の意味：
     1 → 伸縮可能
     1 → 必要なら縮む
     calc(50% - 20px) → 基本幅
  */
}

/* ----------------------------------------
   スマホ向けレイアウト（画面幅 600px 以下）
   → スマホで見やすいようにレイアウトを縦に崩す
---------------------------------------- */
@media screen and (max-width: 600px) {

  /* タイトル画像の周囲に余白をつけて窮屈さを防ぐ */
  .titleImage {
    margin: 20px; /* 上下左右に20pxの余白 */
  }

  /* PCでは横並びだが、スマホでは縦並びに変更 */
  .flexContainer {
    display: block; /* flex → block にして縦方向に並べる */
  }

  /* 2カラムを1カラムにする（幅100%） */
  .halfContainer {
    width: 100%; /* スマホでは横幅いっぱいに広げる */
  }
}


/* ----------------------------------------
   解答欄の点線ライン（AnsLine）
   → 手書きで答えを書くためのガイドライン
---------------------------------------- */
.AnsLine {
  border: none;                     /* デフォルトの枠線を消す */
  border-top: 3px dotted #8987ff;   /* 上側だけ点線を引く（淡い青紫） */
  width: 96%;                       /* 少し余白を残して横幅を調整 */
  margin: 8px 24px 20px;            /* 上8px・左右24px・下20px */
}

.area {
  margin: 60px auto;
  padding: 10px;
  max-width: 1000px;
}

#printAreaQes,
#printAreaAns {
  background-color: white;
  padding: 10px;
  margin: 20px auto;
  border-radius: 10px;
}


.youtubeSection {
  margin: 40px 20px 0;
}

.margin10 {
  margin: 20px 10px;
}

.info-card {
  background: #fff7fc;
  max-width: 350px;
  border: 2px solid #f7c6e8;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.info-card a {
  text-decoration: none;
  color: #3a3399;
  display: block;
}

.info-card h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #9244c0;
}

.info-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.info-card img {
  margin: 10px;
  max-width:  300px;
  border-radius: 10px;
}