@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-shakai.html / 4-shakai.html / 5-shakai.html / 6-shakai.html
   ========================================================================== */

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

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); }
#sho4 { background-color: rgba(0, 160, 80, 0.4);   }
#sho5 { background-color: rgba(240, 140, 0, 0.4);  }
#sho6 { background-color: rgba(0, 108, 184, 0.4);  }

/* --------------------------------------------------------------------------
   ページ枠・レイアウト
   -------------------------------------------------------------------------- */
main.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.8); }
#sho4 main h2 { color: rgba(0, 160, 80, 0.8);   }
#sho5 main h2 { color: rgba(240, 140, 0, 0.8);  }
#sho6 main h2 { color: rgba(0, 108, 184, 0.8);  }

/* 教科タイトル（社会） */
main h3.soc {
  text-align: center;
  font-size: 1.618rem;
  color: #f7ab00;
  border-bottom: 1px dotted #f7ab00;
  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;
  }
}

/* --------------------------------------------------------------------------
   動画リストコンテナ
   -------------------------------------------------------------------------- */
.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 0 0.3em 1.4rem;
  text-indent: -1.4rem;
  font-size: 0.9em;
  line-height: 1.4rem;
  border-bottom: dotted 1px #5f6b6b94;
}

/* --------------------------------------------------------------------------
   リンクスタイル
   -------------------------------------------------------------------------- */
a {
  color: #007394;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.7;
}

a:visited {
  color: #55686d;
}

a.video-link {
  text-decoration: none;
  border-bottom: 1px solid #aac8d0;
  padding-bottom: 0.1em;
  transition: opacity 0.2s, border-color 0.2s;
  margin-left:1rem;

}

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

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
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) {
main.page-frame {
    width: 94%;
    padding: 1rem 1rem 3rem;
  }
   .page-inner {
  padding: 0 2rem;
}
}
/* スマートフォン（〜559px） */
@media screen and (max-width: 559px) {
main.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%;
}
main.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;
}
}