@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   小学ポピー デジタルサポート - 理科 動画リンク集
   対象ファイル: 3-rika.html / 4-rika.html / 5-rika.html / 6-rika.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
html {
  font-family: 'Noto Sans JP', 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 0;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h2,h3{
	padding:0;margin:0;
}
/* --------------------------------------------------------------------------
   学年別 背景色
   -------------------------------------------------------------------------- */
#sho3 { background-color: rgba(235, 110, 143, 0.4); } /* 3年生 */
#sho4 { background-color: rgba(0, 160, 80, 0.4);    } /* 4年生 */
#sho5 { background-color: rgba(240, 140, 0, 0.4);   } /* 5年生 */
#sho6 { background-color: rgba(0, 108, 184, 0.4);   } /* 6年生 */

/* --------------------------------------------------------------------------
   ページ枠・レイアウト
   -------------------------------------------------------------------------- */
.page-frame {
  max-width: 980px;
  width: 70%;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 2rem 1rem 3rem;
  flex: 1;
}

.page-inner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 4rem;
}

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */
main h2 {
  text-align: center;
  font-size: 1.618rem;
  padding:0.4rem;
}

/* 学年別 h2 色 */
#sho3 main h2 { color: rgba(235, 110, 143, 0.9); }
#sho4 main h2 { color: rgba(0, 160, 80, 0.9);    }
#sho5 main h2 { color: rgba(240, 140, 0, 0.9);   }
#sho6 main h2 { color: rgba(0, 108, 184, 0.9);   }

/* 教科タイトル（理科） */
main h3.sci {
  text-align: center;
  font-size: 1.618rem;
  color: rgba(132, 210, 151, 1);
  border-bottom: 1px dotted rgba(132, 210, 151, 1);
  padding:0.2rem;
}

/* --------------------------------------------------------------------------
   NHK注記ブロック
   -------------------------------------------------------------------------- */
.nhk-notice {
  font-size: 80%;
  margin-bottom: 0.8rem;
}

.nhk-notice a {
  text-decoration: none;
  color: #0066c0;
  transition: color 0.2s;
}

.nhk-notice a:hover {
  color: #55686d;
}
/* モバイルのみ表示する改行 */
.mobile-only {
  display: none;
}

@media (max-width: 559px) {
  .mobile-only {
    display: inline;
  }
}
/* --------------------------------------------------------------------------
   教科書選択ラベル
   -------------------------------------------------------------------------- */
.topic-select {
  border-bottom: 0.16rem solid rgb(196, 196, 196);
  padding: 1rem 4px 4px;
  letter-spacing: 0.08em;
  color: #221d1d;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   アコーディオン（教科書別）
   -------------------------------------------------------------------------- */

/* チェックボックス（非表示・トリガー） */
.accordion-toggle {
  display: none;
}

/* ラベル（クリック可能な見出し行） */
.accordion-label {
  display: block;
  cursor: pointer;
  text-decoration: underline;
}

.accordion-label h1 {
  text-align: left;
  font-size: 1.2rem;
  margin-bottom: 0;
  letter-spacing: 0.08em;
  color: #3d3a3a;
}

/* コンテンツ（折りたたみ部分） */
.accordion-content {
  height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  border: 1px solid #a09b9b;
  border-radius: 4px;
  padding: 0 10px;
  margin: 0 0.5rem;
  transition: 0.5s;
}

.accordion-content p {
  text-align: left;
  margin: 0;
  font-size: 90%;
  color: #3d3a3a;
}

/* チェック時に展開 */
.accordion-toggle:checked + .accordion-label + .accordion-content {
  height: 100%;
  opacity: 1;
  padding: 10px;
  visibility: visible;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   動画リストコンテナ
   -------------------------------------------------------------------------- */
.video-container {
  margin: auto;
  padding: 0 0.4rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ddd;
}

/* --------------------------------------------------------------------------
   動画リンクリスト
   -------------------------------------------------------------------------- */
.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 単元見出し行 */
.video-list__heading {
  background: #e7e9e9c4;
  margin-top: 0.6rem;
  margin-bottom: 2px;
  padding: 0.6em;
  font-size: 0.98em;
  font-weight: bold;
  letter-spacing: 0.06em;
  border-bottom: solid 1px #5f6b6bad;
}

/* 動画リンク行
.video-list__item {
  background: #e7e9e960;
  margin-bottom: 2px;
  padding: 0.3em;
  font-size: 0.9em;
  letter-spacing: -0.03em;
  border-bottom: dotted 1px #5f6b6b94;
}*/

/* 動画リンク行（テキストの折り返しをインデントで揃える） */
.video-list__item {
  background: #e7e9e960;
  margin-bottom: 2px;
  padding: 0.3em 0 0.3em 1.4rem;
  text-indent: -1.4rem;
  font-size: 0.9em;
  line-height: 1.4rem;
  letter-spacing: -0.03em;
  border-bottom: dotted 1px #5f6b6b94;
}


/* --------------------------------------------------------------------------
   リンクスタイル
   -------------------------------------------------------------------------- */
a.video-link {
  text-decoration: none;
  color: #007394;
  border-bottom: 1px solid #aac8d0;
  padding-bottom: 0.1em;
  margin-left:1rem;
  transition: opacity 0.2s, border-color 0.2s;
}

a.video-link:hover {
  opacity: 0.7;
  border-bottom-color: #007394;
}

a.video-link:visited {
  color: #55686d;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
footer {
  margin-top: auto;
}

footer p {
  text-align: center;
}

/* --------------------------------------------------------------------------
   表示切り替え
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .only-desktop {
    display: none;
  }
}

@media (min-width: 768px) {
  .only-mobile {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */

/* タブレット（560px〜959px） */
@media screen and (min-width: 560px) and (max-width: 959px) {
  .page-frame {
    width: 94%;
    padding: 1rem 1rem 3rem;
  }
   .page-inner {
  padding: 0 2rem;
}
}
/* スマートフォン（〜559px） */
@media screen and (max-width: 559px) {
  .page-frame {
    width: 94%;
  }
   .page-inner {
  padding:0;
   }
}

@media print {
  /* 印刷時に不要な要素を隠す */
footer {
    display: none !important;
}
  /* レイアウト調整 */
body {
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12pt; /* 印刷に適したサイズ */
    color: #000;
    background: #fff;
    /* ページ全体をグレースケールに*/
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    zoom: 80%;
}
.page-frame {
    padding: 0;
    margin:0 auto;
    width: 100%;
  }
.page-inner {
  padding: 0 1rem;
}
#sho3,#sho4,#sho5,#sho6{
    background-color: #fff;}
  /* リンクのURLを表示する */
a:after {
    content: " ( " attr(href) " )";
    font-size: 70%;
    color: #0066c0;
    font-family: 'roboto','メイリオ','Meiryo','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','ＭＳ Ｐゴシック',sans-serif;
}
}