@charset "UTF-8";
/* 発音 */
/* 会話 */
/* 文法 */
/* 語彙 */
/**/
html body #container {
  width: 100%;
  height: auto;
  background-image: url(./../img/back_leaf.jpg);
  background-repeat: repeat-y;
  background-position: center top;
  letter-spacing: 0.1em;
  /*================================	header	==================================*/
  /*================================	nav#t_path4,nav#t_path5 パンくずナビ	==================================*/
  /*================================	footer	==================================*/
  /*================================	footer	==================================*/ }
  html body #container header {
    background: url(./../img/head_bg.jpg) repeat-x;
    background-size: contain;
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr; }
    html body #container header img {
      grid-column: 1/2;
      width: auto;
      height: auto; }
    html body #container header h1 {
      grid-column: 2/3;
      min-height: 40px;
      color: #ffffff;
      background: none repeat scroll 0 0 transparent;
      line-height: 1.7;
      font-weight: normal;
      padding-left: 10px; }
  html body #container nav#t_path4, html body #container nav#t_path5 {
    background-color: #735a62;
    color: #ffffff;
    height: auto;
    line-height: 1.5; }
    html body #container nav#t_path4 a, html body #container nav#t_path5 a {
      color: #fff;
      text-decoration: none; }
      html body #container nav#t_path4 a:hover, html body #container nav#t_path5 a:hover {
        color: #f90;
        text-decoration: none; }
  html body #container footer {
    width: 100%;
    bottom: 0px;
    background-color: #c78198; }
    html body #container footer .c_right,
    html body #container footer p {
      color: #fff;
      font-size: smaller;
      text-align: center; }

/*==============================================================================================
●style.css 画面の横幅が1024px以上
==============================================================================================*/
@media screen and (min-width: 1024px) {
  html body {
    /* container の直下はheader, nav#t_path5 section#content_box, footer#footer2の4つ*/ }
    html body #container {
      /*================================	header	==================================*/ }
      html body #container nav#t_path4, html body #container nav#t_path5 {
        width: 980px;
        margin-top: 25px; }
      html body #container footer {
        line-height: 26px; } }
/*==============================================================================================
●style.css 画面の横幅が641px以上、1023px以下
==============================================================================================*/
@media screen and (min-width: 641px) and (max-width: 1023px) {
  html body {
    /* container の直下はheader, nav#t_path5 section#content_box, footer#footer2の4つ*/ }
    html body #container {
      /*================================	header	==================================*/ }
      html body #container nav#t_path4, html body #container nav#t_path5 {
        margin-top: 25px; }
      html body #container footer {
        line-height: 26px; } }
/*==============================================================================================
●style.css 画面の横幅が640px以下
==============================================================================================*/
@media screen and (max-width: 640px) {
  html body {
    /* container の直下はheader, nav#t_path5 section#content_box, footer#footer2の4つ*/ }
    html body #container {
      /*================================	header	==================================*/ }
      html body #container header h1 {
        font-size: 14px;
        line-height: 3; }
      html body #container nav#t_path4, html body #container nav#t_path5 {
        margin-top: 0px; }
        html body #container nav#t_path4 a:first-child span, html body #container nav#t_path5 a:first-child span {
          display: none; }
      html body #container footer .c_right,
      html body #container footer p {
        padding: 2px 0; } }
body div#container {
  font-family: Noto Sans JP, YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif; }
  body div#container header {
    font-size: 12px; }
  body div#container #content_box nav#t_path4 {
    height: auto;
    line-height: 20px;
    width: 100%;
    margin-top: 0px;
    font-size: 12px; }
  body div#container #content_box p {
    padding: 10px; }
  body div#container #content_box span.txt-sc {
    font-family: 'Noto Sans SC', YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif; }
  body div#container #content_box span.txt-tc {
    font-family: 'Noto Sans TC', YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif; }
  body div#container #content_box .bonrei-table {
    display: grid;
    background-color: white;
    grid-template-columns: 150px 1fr; }
  body div#container #content_box .kanji-table {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    font-family: 'Noto Sans SC', SimSun, YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-se; }
    body div#container #content_box .kanji-table .moji-data {
      width: 300px;
      display: grid;
      grid-template-columns: 90px 1fr; }
      body div#container #content_box .kanji-table .moji-data div:first-child {
        border-right: dotted 1px; }
      body div#container #content_box .kanji-table .moji-data .expla-block p:first-child {
        font-family: 'Noto Sans', YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-se; }
      body div#container #content_box .kanji-table .moji-data .expla-block p:nth-child(2) {
        font-family: YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-se; }
  body div#container #content_box #strokeOrderVideos {
    display: none; }
    body div#container #content_box #strokeOrderVideos .videoBlock {
      border: solid;
      position: fixed;
      background-color: white; }
      body div#container #content_box #strokeOrderVideos .videoBlock #control-button {
        padding-top: 10px;
        display: flex;
        justify-content: center;
        gap: 10px 10px; }

/*==============================================================================================
●style.css 画面の横幅が1024px以上
==============================================================================================*/
@media screen and (min-width: 1024px) {
  /*==================================
  gra04用
  ===================================*/
  html body div#container section#content_box {
    width: 980px;
    display: grid;
    min-height: 800px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto; }
    html body div#container section#content_box .bonrei-table {
      margin: 10px auto;
      display: grid;
      background-color: white;
      grid-template-columns: 150px 1fr;
      width: 614px; }
      html body div#container section#content_box .bonrei-table div {
        border: dotted 1px;
        border-right: none; }
        html body div#container section#content_box .bonrei-table div:nth-child(2n) {
          border-right: dotted 1px; }
        html body div#container section#content_box .bonrei-table div:first-child {
          padding: 20px;
          font-size: 150%;
          line-height: 60px;
          vertical-align: midle; }
    html body div#container section#content_box .kanji-table {
      width: 614px;
      margin: 10px auto; }
      html body div#container section#content_box .kanji-table .moji-data {
        width: 300px;
        border: dotted 1px;
        border-bottom: none;
        border-right: none; }
        html body div#container section#content_box .kanji-table .moji-data:nth-child(2n) {
          border-right: dotted 1px; }
        html body div#container section#content_box .kanji-table .moji-data:last-child {
          border-bottom: dotted 1px; }
        html body div#container section#content_box .kanji-table .moji-data:nth-last-child(2) {
          border-bottom: dotted 1px; }
        html body div#container section#content_box .kanji-table .moji-data div:first-child {
          padding: 10px;
          font-size: 300%;
          line-height: 60px; }
        html body div#container section#content_box .kanji-table .moji-data div:nth-child(2) {
          font-size: 110%; }
    html body div#container section#content_box #strokeOrderVideos .videoBlock {
      border: solid;
      height: 538px;
      width: 480px;
      top: 100px; }
      html body div#container section#content_box #strokeOrderVideos .videoBlock video {
        height: 480px;
        width: 480px; }
      html body div#container section#content_box #strokeOrderVideos .videoBlock #control-button {
        padding-top: 10px;
        display: flex;
        justify-content: center;
        gap: 10px 10px; } }
/*==============================================================================================
●tablet.css 画面の横幅が641pxから1023pxまで
==============================================================================================*/
@media screen and (min-width: 641px) and (max-width: 1023px) {
  html body div#container section#content_box {
    display: grid;
    min-height: 800px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px; }
    html body div#container section#content_box .bonrei-table {
      display: grid;
      background-color: white;
      grid-template-columns: 150px 1fr;
      width: 614px;
      margin: 10px auto; }
      html body div#container section#content_box .bonrei-table div {
        border: dotted 1px;
        border-right: none; }
        html body div#container section#content_box .bonrei-table div:nth-child(2n) {
          border-right: dotted 1px; }
        html body div#container section#content_box .bonrei-table div:first-child {
          padding: 20px;
          font-size: 150%;
          line-height: 60px;
          vertical-align: midle; }
    html body div#container section#content_box .kanji-table {
      width: 614px;
      margin: 10px auto; }
      html body div#container section#content_box .kanji-table .moji-data {
        width: 300px;
        border: dotted 1px;
        border-bottom: none;
        border-right: none; }
        html body div#container section#content_box .kanji-table .moji-data:nth-child(2n) {
          border-right: dotted 1px; }
        html body div#container section#content_box .kanji-table .moji-data:last-child {
          border-bottom: dotted 1px; }
        html body div#container section#content_box .kanji-table .moji-data:nth-last-child(2) {
          border-bottom: dotted 1px; }
        html body div#container section#content_box .kanji-table .moji-data div:first-child {
          padding: 10px;
          font-size: 300%;
          line-height: 60px; }
        html body div#container section#content_box .kanji-table .moji-data div:nth-child(2) {
          font-size: 110%; }
    html body div#container section#content_box #strokeOrderVideos .videoBlock {
      border: solid;
      height: 538px;
      width: 480px;
      top: 100px; }
      html body div#container section#content_box #strokeOrderVideos .videoBlock video {
        height: 480px;
        width: 480px; }
      html body div#container section#content_box #strokeOrderVideos .videoBlock #control-button {
        padding-top: 10px;
        display: flex;
        justify-content: center;
        gap: 10px 10px; } }
/*==============================================================================================
●smart.css  画面の横幅が640px以下の時にスタイル適応
==============================================================================================*/
@media screen and (max-width: 640px) {
  body div#container #content_box .bonrei-table {
    display: grid;
    background-color: white;
    grid-template-columns: 150px 1fr; }
    body div#container #content_box .bonrei-table div {
      border: dotted 1px;
      border-right: none; }
      body div#container #content_box .bonrei-table div:nth-child(2n) {
        border-right: dotted 1px; }
      body div#container #content_box .bonrei-table div:first-child {
        padding: 20px;
        font-size: 150%;
        line-height: 60px;
        vertical-align: midle; }
  body div#container #content_box p, body div#container #content_box h1 {
    padding: 0px 10px; }
  body div#container #content_box .kanji-table {
    margin-bottom: 10px;
    width: 100%; }
    body div#container #content_box .kanji-table .moji-data {
      width: 100%;
      border: dotted 1px;
      border-bottom: none; }
      body div#container #content_box .kanji-table .moji-data:last-child {
        border-bottom: dotted 1px; }
      body div#container #content_box .kanji-table .moji-data div:first-child {
        padding: 10px;
        font-size: 300%;
        line-height: 60px; }
      body div#container #content_box .kanji-table .moji-data div:nth-child(2) {
        font-size: 110%; }
  body div#container #content_box #strokeOrderVideos .videoBlock {
    border: solid;
    height: auto;
    width: 100%;
    top: 10px; }
    body div#container #content_box #strokeOrderVideos .videoBlock video {
      height: auto;
      width: 100%; }
    body div#container #content_box #strokeOrderVideos .videoBlock #control-button {
      padding: 10px;
      display: flex;
      justify-content: center;
      gap: 10px 10px; } }

/*# sourceMappingURL=style_moji_zh.css.map */