@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;
    margin-left: auto;
    margin-right: auto; }
    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; } }
/******************************************** 文法モジュール構造 *******************************************
// コースTOPインデックスページ：gmod/courses/c01/
html {
  body {
      div#container{
          header{
              img#head_icon{}
              h1{}
          }
          nav#t_path4{}// パンくずナビ 
          section#content_box{// コースTOPページの場合、直下はsub_menuとsub_content
              nav#sub_menu{} // PC左メニュー
              section#sub_content{} // メインコンテンツ
          }
          footer#footer{}
      }
  }
}
// レッスンTOP： gmod/courses/c01/lesson01/
          nav#t_path4{}// パンくずナビ 
          section#content_box{// レッスンTOPページの場合、直下はgmod_navとarticle
            nav#gmodnav{}// 前へ・次へナビ
            article{
              section#lesson_list{// メインコンテンツ
                h2.gra_in_title{}// lessonタイトル
                ul.gra_list{} // レッスン内ページリスト
              } 
            }
          }
          footer#footer{}

******************************************* 文法モジュール構造 *******************************************/
html body {
  font-family: YuGothic,"Hiragino Kaku Gothic ProN",Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3","メイリオ", Meiryo, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em; }
  html body img {
    max-width: 100%;
    height: auto;
    width/***/: auto; }
  html body div#container nav#t_path4 {
    background-color: #735a62;
    color: #ffffff; }
    html body div#container nav#t_path4 a {
      color: #fff;
      text-decoration: none; }
      html body div#container nav#t_path4 a:hover {
        color: #ccc;
        text-decoration: none; }
  html body div#container section#content_box {
    /*=============================== コースTOP ===============================*/
    /*=============================== コースTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== コースTOP ===============================*/
    /*=============================== コースTOP ===============================*/ }
    html body div#container section#content_box .left {
      float: left; }
    html body div#container section#content_box .right {
      float: right; }
    html body div#container section#content_box nav#sub_menu {
      background-color: #ede8e4; }
      html body div#container section#content_box nav#sub_menu a {
        color: #333;
        text-decoration: none; }
        html body div#container section#content_box nav#sub_menu a:hover {
          color: #fff;
          text-decoration: none; }
      html body div#container section#content_box nav#sub_menu #sub_menu_bunpou_title2 {
        background: url(./../img/icon_bunpou.jpg) no-repeat #dcb6c5;
        color: #333; }
      html body div#container section#content_box nav#sub_menu .gra_menu_snd {
        background: url(./../img/submenu_cursol.png) no-repeat #e3c5d1 center left;
        border-bottom: 1px dashed #eee; }
      html body div#container section#content_box nav#sub_menu #gra_menu_foot {
        background: url(./../img/list3.png) no-repeat #d1ceca;
        color: #ffffff; }
    html body div#container section#content_box #gra_list li {
      background: url(./../img/gray_cursor2.jpg) no-repeat left center #ede8e4;
      color: #333;
      min-height: 50px;
      vertical-align: middle;
      padding-left: 25px;
      padding-top: 4px;
      font-size: 14px;
      letter-spacing: 1px;
      margin-top: 10px; }
      html body div#container section#content_box #gra_list li a {
        text-decoration: none;
        color: #333; }
    html body div#container section#content_box section#sub_content article.sub01_c_clm {
      background-color: #ede8e4; }
      html body div#container section#content_box section#sub_content article.sub01_c_clm h3 {
        background-color: #d1ceca;
        color: #333; }
      html body div#container section#content_box section#sub_content article.sub01_c_clm .contents .ulist .list {
        padding: 5px 10px; }
    html body div#container section#content_box nav#gmodnav .gra_in_menu_container p {
      height: 40px;
      float: left; }
      html body div#container section#content_box nav#gmodnav .gra_in_menu_container p a {
        color: #333;
        text-decoration: none; }
    html body div#container section#content_box nav#gmodnav .gra_in_menu_container p.gra_in_menu {
      background: #dcacbf url(../img/top_cursor.png);
      background-position: center; }
    html body div#container section#content_box nav#gmodnav .gra_in_menu_container p.gra_in_menu_off {
      background-color: #dcd1d5; }
      html body div#container section#content_box nav#gmodnav .gra_in_menu_container p.gra_in_menu_off span {
        color: #aaa; }
    html body div#container section#content_box nav#gmodnav .gra_in_backnext div a {
      color: #333333;
      text-decoration: none; }
    html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back {
      background: url(../img/back_btn_on.jpg) top center no-repeat; }
    html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next {
      background: url(../img/next_btn_on.jpg) top center no-repeat; }
    html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back_off {
      background: url(../img/back_btn_off.jpg) top center no-repeat; }
    html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next_off {
      background: url(../img/next_btn_off.jpg) top center no-repeat; }
    html body div#container section#content_box div.gra_in_content {
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      font-size: 14px; }
      html body div#container section#content_box div.gra_in_content .gra_ques_sec .ques_box .ques_text {
        line-height: 38px; }
      html body div#container section#content_box div.gra_in_content #exPageNav {
        display: grid;
        grid-template-columns: 1fr 90px 1fr;
        margin-right: 10px; }
        html body div#container section#content_box div.gra_in_content #exPageNav div,
        html body div#container section#content_box div.gra_in_content #exPageNav p {
          line-height: 1.5;
          text-align: center; }
      html body div#container section#content_box div.gra_in_content th,
      html body div#container section#content_box div.gra_in_content td {
        border: 1px solid #333;
        padding: 7px;
        text-align: center; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block {
        position: relative; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock {
          position: absolute;
          top: 10px;
          opacity: 0.9;
          background-color: white;
          border: solid; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock h1 {
            text-align: center; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock p {
            font-size: 120%;
            padding: 20px; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock div {
            margin: 20px; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_foot {
          height: auto;
          background-color: #f5f1ee;
          font-size: 14px;
          min-height: 40px;
          line-height: 2; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_btnarea {
          margin: 10px; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_btnarea button {
            height: 30px;
            font-size: 18px;
            border-radius: 3px;
            white-space: nowrap;
            background-color: #999;
            color: #ffffff;
            border: 1px solid #ccc; }
            html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_btnarea button:hover {
              background-color: #555; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_box {
          display: inline-block;
          width: 40px;
          border-bottom: dotted 1px #aaaaaa;
          text-align: center; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_p_mg {
          margin: 0px 5px; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_ul {
          border: solid 1px #aaaaaa;
          padding: 5px 10px;
          margin-top: 20px;
          margin-bottom: 20px; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_ul li {
            float: left;
            width: auto;
            height: 40px;
            padding: 5px 10px;
            line-height: 40px;
            border: solid 1px #aaaaaa;
            margin-right: 10px;
            background-color: #ffffff;
            cursor: move; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box {
          line-height: 2em;
          font-size: 110%;
          padding: 10px 5px 0px 5px; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box label {
            display: block;
            cursor: pointer; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drag_ul {
            padding: 5px 0px;
            float: left; }
            html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drag_ul li {
              line-height: 2;
              border: solid 1px #aaaaaa;
              margin-bottom: 5px;
              padding: 5px;
              text-align: center;
              background-color: #ffffff;
              cursor: move; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drop_ul {
            padding: 5px 0px;
            float: left; }
            html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drop_ul li {
              line-height: 2;
              border: solid 1px #aaaaaa;
              margin-bottom: 5px;
              padding: 5px;
              background-color: #ede8e4; }
    html body div#container section#content_box h2.gra_in_title {
      background-color: #d1ceca;
      color: #333;
      font-weight: normal;
      min-height: 30px;
      font-size: 16px;
      line-height: 30px;
      padding-left: 15px; }
    html body div#container section#content_box div.contents div.para {
      font-size: 15px;
      letter-spacing: 1px;
      line-height: 1.3em; }
    html body div#container section#content_box div.contents .gra_dl_title {
      margin-top: 20px;
      margin-bottom: 15px;
      margin-left: 25px;
      font-size: 16px; }
    html body div#container section#content_box div.contents .gra_dl_box {
      min-height: 50px;
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px;
      background-color: #ede8e4; }
      html body div#container section#content_box div.contents .gra_dl_box .instTxtBlk {
        float: left;
        line-height: 1.3em;
        font-size: 15px; }
      html body div#container section#content_box div.contents .gra_dl_box .voiceLinkBox {
        float: right;
        margin-top: 4px;
        margin-right: 4px; }

/*==============================================================================================
●style.css 画面の横幅が1024px以上
==============================================================================================*/
@media screen and (min-width: 1024px) {
  /*==================================
  gra04用
  ===================================*/
  html body div#container nav#t_path4 {
    height: auto;
    line-height: 20px;
    margin-top: 25px;
    width: 980px;
    margin-left: auto;
    margin-right: auto; }
  html body div#container section#content_box {
    width: 980px;
    display: grid;
    min-height: 800px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    /*=============================== 文法TOP、コースTOP ===============================*/
    /*=============================== 文法TOP、コースTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== Step ===============================*/
    /*=============================== Step ===============================*/ }
    html body div#container section#content_box nav#sub_menu {
      grid-column: 1/2;
      width: 240px;
      min-height: 800px;
      overflow: hidden; }
      html body div#container section#content_box nav#sub_menu #sub_menu_bunpou_title2 {
        width: 200px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 40px;
        margin-bottom: 5px;
        margin-top: 10px;
        font-weight: normal; }
      html body div#container section#content_box nav#sub_menu .gra_menu_snd {
        width: 200px;
        min-height: 24px;
        padding-left: 40px;
        padding-top: 14px;
        padding-bottom: 13px;
        vertical-align: middle; }
      html body div#container section#content_box nav#sub_menu #gra_menu_foot {
        width: 210px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 30px;
        margin-top: 25px;
        font-weight: normal; }
    html body div#container section#content_box section#sub_content {
      width: 700px;
      min-height: 800px;
      grid-column: 2/3; }
      html body div#container section#content_box section#sub_content .sub01_c_clm,
      html body div#container section#content_box section#sub_content #gra_list {
        width: 660px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm h3 {
        font-weight: normal;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        padding-left: 15px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm div.para {
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1.3em;
        padding: 20px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm #course_desc {
        padding: 20px;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1.3em; }
      html body div#container section#content_box section#sub_content #gra_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px; }
    html body div#container section#content_box nav#gmodnav {
      display: grid;
      grid-template-columns: 1fr 170px;
      grid-row: 1/2;
      font-size: 10px; }
      html body div#container section#content_box nav#gmodnav .gra_in_backnext {
        height: 50px;
        display: grid;
        grid-column: 2/3; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div {
          height: 40px;
          padding-top: 33px; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div a,
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div span {
            color: #333333;
            text-decoration: none; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div:first-child {
            grid-column: 1/2; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div:nth-child(2) {
            grid-column: 2/3; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back {
          width: 80px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next {
          width: 80px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back_off {
          width: 80px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next_off {
          width: 80px; }
      html body div#container section#content_box nav#gmodnav .gra_in_menu_container {
        grid-column: 1/2;
        line-height: 45px;
        font-size: 16px;
        text-align: center; }
        html body div#container section#content_box nav#gmodnav .gra_in_menu_container p {
          width: 120px;
          margin-right: 10px; }
    html body div#container section#content_box > article {
      grid-row: 2/3;
      min-height: 800px; }
      html body div#container section#content_box > article section#lesson_list ul#gra_list li {
        width: 315px;
        display: inline-block; }
    html body div#container section#content_box > h2.gra_in_title {
      height: 30px; }
    html body div#container section#content_box > div.contents {
      padding-top: 20px;
      min-height: 720px; }
      html body div#container section#content_box > div.contents div.para {
        padding: 20px; }
      html body div#container section#content_box > div.contents .gra_dl_box {
        width: 769px; }
    html body div#container section#content_box div.gra_in_content {
      width: 92%;
      min-height: 720px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      font-size: 14px; }
      html body div#container section#content_box div.gra_in_content .gra_ques_sec .ques_box .ques_text {
        line-height: 2.5;
        padding-left: 10px; }
      html body div#container section#content_box div.gra_in_content #exPageNav {
        display: grid;
        grid-template-columns: 1fr 60px 1fr; }
        html body div#container section#content_box div.gra_in_content #exPageNav div,
        html body div#container section#content_box div.gra_in_content #exPageNav p {
          line-height: 2.5;
          text-align: center; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block {
        position: relative; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock {
          position: absolute;
          top: 10px;
          left: 10px;
          width: 460px;
          border: solid;
          opacity: 0.9;
          background-color: white;
          border: solid; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock p {
            font-size: 120%;
            padding: 20px; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .answerBlock div {
            margin: 20px; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_foot {
          height: auto;
          background-color: #f5f1ee;
          font-size: 14px;
          min-height: 40px;
          padding-left: 10px;
          line-height: 3; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_box {
          display: inline-block;
          width: 40px;
          border-bottom: dotted 1px #aaaaaa;
          text-align: center; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_p_mg {
          margin: 0px 5px; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_ul {
          border: solid 1px #aaaaaa;
          padding: 5px 10px;
          width: 600px;
          margin-top: 20px;
          margin-bottom: 20px; }
          html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_ul li {
            float: left;
            width: auto;
            height: 40px;
            padding: 5px 10px;
            line-height: 40px;
            border: solid 1px #aaaaaa;
            margin-right: 10px;
            background-color: #ffffff;
            cursor: move; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drag_ul {
          width: 410px;
          margin-right: 15px; }
        html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drop_ul {
          width: 410px; }
    html body div#container section#content_box #exercises_box {
      min-height: 720px;
      width: 92%; } }
/*==============================================================================================
●tablet.css 画面の横幅が641pxから1023pxまで
==============================================================================================*/
@media screen and (min-width: 641px) and (max-width: 1023px) {
  html body div#container section#content_box {
    width: 725px;
    display: grid;
    min-height: 800px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    /*=============================== 文法TOP、コースTOP ===============================*/
    /*=============================== 文法TOP、コースTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== Step ===============================*/
    /*=============================== Step ===============================*/ }
    html body div#container section#content_box nav#sub_menu {
      grid-column: 1/2;
      width: 240px;
      min-height: 800px;
      overflow: hidden; }
      html body div#container section#content_box nav#sub_menu #sub_menu_bunpou_title2 {
        width: 200px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 40px;
        margin-bottom: 5px;
        margin-top: 10px;
        font-weight: normal; }
      html body div#container section#content_box nav#sub_menu .gra_menu_snd {
        width: 200px;
        min-height: 24px;
        padding-left: 40px;
        padding-top: 14px;
        padding-bottom: 13px;
        vertical-align: middle; }
      html body div#container section#content_box nav#sub_menu #gra_menu_foot {
        width: 210px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 30px;
        margin-top: 25px;
        font-weight: normal; }
    html body div#container section#content_box section#sub_content {
      width: 700px;
      min-height: 800px;
      grid-column: 2/3;
      padding-bottom: 0px;
      margin-left: 0px;
      width: 465px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm,
      html body div#container section#content_box section#sub_content #gra_list {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        margin-left: 5px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm h3 {
        font-weight: normal;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        padding-left: 15px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm div.para {
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1.3em;
        padding: 20px; }
      html body div#container section#content_box section#sub_content #gra_list li {
        width: 197px;
        height: 60px;
        vertical-align: middle;
        padding-left: 25px;
        padding-right: 5px;
        padding-top: 4px;
        display: inline-block;
        font-size: 15px;
        letter-spacing: 1px;
        margin-top: 10px;
        line-height: 18px; }
    html body div#container section#content_box nav#gmodnav {
      display: grid;
      grid-template-columns: 1fr 170px;
      grid-row: 1/2;
      font-size: 10px; }
      html body div#container section#content_box nav#gmodnav .gra_in_backnext {
        height: 50px;
        display: grid;
        grid-column: 2/3; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div {
          height: 40px;
          padding-top: 33px; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div a,
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div span {
            color: #333333;
            text-decoration: none; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div:first-child {
            grid-column: 1/2; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div:nth-child(2) {
            grid-column: 2/3; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back {
          width: 80px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next {
          width: 80px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back_off {
          width: 80px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next_off {
          width: 80px; }
      html body div#container section#content_box nav#gmodnav .gra_in_menu_container {
        margin-bottom: 20px;
        line-height: 45px;
        font-size: 16px;
        text-align: center; }
        html body div#container section#content_box nav#gmodnav .gra_in_menu_container p {
          width: 120px;
          margin-right: 10px; }
    html body div#container section#content_box > article {
      grid-row: 2/3;
      min-height: 800px; }
      html body div#container section#content_box > article section#lesson_list ul#gra_list li {
        width: 195px;
        height: 60px;
        vertical-align: middle;
        padding-left: 25px;
        padding-right: 5px;
        padding-top: 4px;
        display: inline-block;
        font-size: 15px;
        letter-spacing: 1px;
        margin-top: 10px;
        line-height: 18px; }
    html body div#container section#content_box > h2.gra_in_title {
      height: 30px; }
    html body div#container section#content_box > div.contents {
      padding-top: 20px;
      min-height: 720px; }
      html body div#container section#content_box > div.contents div.para {
        padding: 20px; }
    html body div#container section#content_box div.gra_in_content {
      width: 92%;
      min-height: 729px; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_foot {
        min-height: 40px;
        padding-left: 10px;
        line-height: 3; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box label {
        line-height: 3; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drag_ul {
        width: 310px;
        margin-right: 15px; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drop_ul {
        width: 310px; }
      html body div#container section#content_box div.gra_in_content #ques_result #ques_res_box #pmo_ans_tbl {
        margin: 0px auto; } }
/*==============================================================================================
●smart.css  画面の横幅が640px以下の時にスタイル適応
==============================================================================================*/
@media screen and (max-width: 640px) {
  html body div#container section#content_box {
    display: grid;
    row-gap: 20px;
    /*=============================== 文法TOP、コースTOP ===============================*/
    /*=============================== 文法TOP、コースTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== レッスンTOP ===============================*/
    /*=============================== Step ===============================*/
    /*=============================== Step ===============================*/ }
    html body div#container section#content_box nav#sub_menu {
      grid-row: 2/3;
      overflow: hidden; }
      html body div#container section#content_box nav#sub_menu #sub_menu_bunpou_title2 {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 40px;
        margin-bottom: 5px;
        margin-top: 10px;
        font-weight: normal; }
      html body div#container section#content_box nav#sub_menu .gra_menu_snd {
        min-height: 24px;
        padding-left: 40px;
        padding-top: 14px;
        padding-bottom: 13px;
        vertical-align: middle; }
      html body div#container section#content_box nav#sub_menu #gra_menu_foot {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding-left: 30px;
        margin-top: 25px;
        font-weight: normal; }
    html body div#container section#content_box section#sub_content {
      grid-row: 1/2; }
      html body div#container section#content_box section#sub_content .sub01_c_clm h3 {
        padding-left: 15px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm div.para {
        padding: 20px 10px;
        font-size: 15px; }
      html body div#container section#content_box section#sub_content .sub01_c_clm #course_desc {
        padding: 20px 10px; }
      html body div#container section#content_box section#sub_content #gra_list {
        width: 100%; }
        html body div#container section#content_box section#sub_content #gra_list li {
          padding-left: 25px;
          font-size: 15px; }
    html body div#container section#content_box nav#gmodnav {
      font-size: 10px; }
      html body div#container section#content_box nav#gmodnav .gra_in_backnext {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div {
          height: 40px;
          padding-top: 0px; }
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div a,
          html body div#container section#content_box nav#gmodnav .gra_in_backnext div span {
            color: #333333;
            text-decoration: none;
            line-height: 3;
            font-size: 13px; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext > div:first-child {
          padding-left: 50px;
          text-align: left; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext > div:nth-child(2) {
          padding-right: 50px;
          text-align: right; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back {
          background-position: left; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next {
          background-position: right; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_back_off {
          background-position: left; }
        html body div#container section#content_box nav#gmodnav .gra_in_backnext div#gra_step_next_off {
          background-position: right; }
      html body div#container section#content_box nav#gmodnav .gra_in_menu_container {
        margin-top: 10px;
        margin-bottom: 0px;
        line-height: 45px;
        font-size: 16px;
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px; }
        html body div#container section#content_box nav#gmodnav .gra_in_menu_container p {
          width: 100%; }
    html body div#container section#content_box article section#lesson_list ul#gra_list {
      width: 100%; }
      html body div#container section#content_box article section#lesson_list ul#gra_list li {
        height: 60px;
        line-height: 18px; }
    html body div#container section#content_box div.contents div.para {
      padding: 10px;
      word-wrap: break-word;
      word-break: break-all; }
      html body div#container section#content_box div.contents div.para td {
        padding: 0px; }
    html body div#container section#content_box div.gra_in_content {
      margin: 0px; }
      html body div#container section#content_box div.gra_in_content .gra_ques_sec .ques_box {
        display: grid;
        grid-template-columns: 32px 1fr; }
        html body div#container section#content_box div.gra_in_content .gra_ques_sec .ques_box .ques_text {
          font-size: 12px;
          padding-left: 10px; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .gra_ques_foot {
        padding-left: 10px; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .sort_drag_ul li {
        float: none;
        margin-bottom: 10px; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box label {
        line-height: 3; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drag_ul {
        width: 100%; }
      html body div#container section#content_box div.gra_in_content div#exercisesContainer .ques_block .ques_item_box .match_drop_ul {
        width: 100%; }
      html body div#container section#content_box div.gra_in_content #ques_result {
        width: 100%; }
        html body div#container section#content_box div.gra_in_content #ques_result #ques_res_box #pmo_ans_tbl {
          margin: 0px auto;
          width: 100%; } }

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