@charset "UTF-8";
@font-face {
  font-family: "iconFont";
  src: url("iconFont/iconFont.eot");
  src: url("iconFont/iconFont.woff2") format("woff2"), url("iconFont/iconFont.woff") format("woff"), url("iconFont/iconFont.ttf") format("truetype"), url("iconFont/iconFont.svg#iconFont") format("svg"); }

.icon-back:before, .icon-closed:before, .sec-unit-title:before, .icon-doc:before, .icon-font:before, .icon-link:before, .icon-opened:before, .sec-unit input[type=checkbox]:checked + .sec-unit-title:before, .icon-pdf:before, .icon-sound:before, .icon-zip:before {
  font-family: "iconFont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none; }

.icon-back:before {
  content: ""; }

.icon-closed:before, .sec-unit-title:before {
  content: ""; }

.icon-doc:before {
  content: ""; }

.icon-font:before {
  content: ""; }

.icon-link:before {
  content: ""; }

.icon-opened:before, .sec-unit input[type=checkbox]:checked + .sec-unit-title:before {
  content: ""; }

.icon-pdf:before {
  content: ""; }

.icon-sound:before {
  content: ""; }

.icon-zip:before {
  content: ""; }

[class^=icon-]:before,
[class*=icon-]:before {
  font-family: "iconFont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none; }

* {
  box-sizing: border-box; }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 62.5%; }

body {
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 1.0rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

div {
  margin: 0;
  padding: 0;
  font-size: 1.8rem; }

p {
  margin: 0;
  padding: 0;
  font-size: 1.4rem; }

a {
  text-decoration: none; }

img {
  display: block;
  width: 100%; }

main {
  display: block;
  padding: 1.5rem; }

/* ---------------------

    flex box

--------------------- */
.cmn-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.75rem; }
  .cmn-box > * {
    align-self: flex-start;
    width: 33.3%;
    margin-bottom: 1.5rem;
    padding: 0 0.75rem; }

/* ---------------------

    header

--------------------- */
header {
  border-bottom-width: 1px;
  border-bottom-style: solid; }

.cmn-header-inner {
  display: table;
  width: 100%;
  min-height: 6.4rem; }

.cmn-header-title, .cmn-header-back {
  display: table-cell;
  vertical-align: middle;
  padding: 0 1.5rem; }

.cmn-header-title {
  text-align: center; }
  .cmn-header-title-main {
    font-size: 2.4rem;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); }
    .cmn-header-title-main span {
      vertical-align: middle; }
    .cmn-header-title-main .label {
      line-height: 1;
      display: inline-block;
      padding: 0.5rem 1rem;
      margin-right: 0.5rem;
      border-radius: calc(1.8rem + 1rem);
      font-size: 1.8rem;
      text-shadow: none; }
  .cmn-header-title-sub {
    font-size: 1.4rem; }

.cmn-header-back {
  width: 12.0rem;
  padding-right: 0; }
  .cmn-header-back a {
    display: block;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 0.4rem;
    padding: 1.2rem;
    background: linear-gradient(#f1f1f1, #e1e1e1);
    box-shadow: 0 1px white inset;
    color: #000;
    font-size: 1.8rem;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFF;
    vertical-align: middle;
    line-height: 1.5;
    white-space: nowrap;
    padding: 0.93333rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
    position: relative;
    padding-left: 4.26667rem; }
    .cmn-header-back a:active {
      background: linear-gradient(#e1e1e1, #f1f1f1); }
    .cmn-header-back a::before {
      position: absolute;
      top: calc(50% - 1.2rem);
      left: 0.93333rem;
      font-size: 2.4rem; }
  .cmn-header-back + div {
    padding-right: 13.5rem; }

/* ---------------------

    index page

--------------------- */
.index {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%; }
  .index header,
  .index main,
  .index footer {
    min-width: 100%; }
  .index main {
    flex-grow: 1; }
  .index footer {
    margin-top: 3rem; }

.btn-grade {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: #aaa;
  border-radius: 0.4rem;
  padding: 1.2rem;
  background: linear-gradient(#f1f1f1, #e1e1e1);
  box-shadow: 0 1px white inset;
  color: #000;
  font-size: 1.8rem;
  text-decoration: none;
  text-shadow: 0 1px 0 #FFF;
  vertical-align: middle;
  line-height: 1.5;
  white-space: nowrap;
  padding: 2rem;
  text-align: center; }
  .btn-grade:active {
    background: linear-gradient(#e1e1e1, #f1f1f1); }

.sec-info {
  display: inline-table;
  border-collapse: separate;
  border-spacing: 1.5rem; }
  .sec-info-box {
    display: table-row; }
  .sec-info-inner {
    display: table-cell;
    vertical-align: middle; }
  .sec-info .btn {
    display: block;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 0.4rem;
    padding: 1.2rem;
    background: linear-gradient(#f1f1f1, #e1e1e1);
    box-shadow: 0 1px white inset;
    color: #000;
    font-size: 1.8rem;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFF;
    vertical-align: middle;
    line-height: 1.5;
    white-space: nowrap;
    padding: 0.93333rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
    position: relative;
    padding-left: 4.26667rem; }
    .sec-info .btn:active {
      background: linear-gradient(#e1e1e1, #f1f1f1); }
    .sec-info .btn::before {
      position: absolute;
      top: calc(50% - 1.2rem);
      left: 0.93333rem;
      font-size: 2.4rem; }

/* ---------------------

    grade page

--------------------- */
.sec-unit {
  border-width: 1px;
  border-style: solid;
  border-color: #aaa;
  border-radius: 0.4rem;
  overflow: hidden; }
  .sec-unit + .sec-unit {
    margin-top: 1.5rem; }
  .sec-unit-title {
    display: block;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 0.4rem;
    padding: 1.2rem;
    background: linear-gradient(#f1f1f1, #e1e1e1);
    box-shadow: 0 1px white inset;
    color: #000;
    font-size: 1.8rem;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFF;
    vertical-align: middle;
    line-height: 1.5;
    white-space: nowrap;
    padding: 1.2rem;
    font-size: 1.8rem;
    line-height: 3rem;
    position: relative;
    padding-left: 5.4rem;
    border-radius: 0;
    border: none;
    white-space: normal;
    cursor: pointer; }
    .sec-unit-title:active {
      background: linear-gradient(#e1e1e1, #f1f1f1); }
    .sec-unit-title::before {
      position: absolute;
      top: calc(50% - 1.5rem);
      left: 1.2rem;
      font-size: 3rem; }
  .sec-unit-content {
    display: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: #aaa;
    padding: 0 0.75rem;
    background: #FFF; }
    .sec-unit-content .cmn-box > * {
      margin-top: 1.5rem;
      padding: 0 1.5rem; }
  .sec-unit input[type=checkbox] {
    display: none; }
    .sec-unit input[type=checkbox]:checked + .sec-unit-title {
      background: linear-gradient(#e1e1e1, #f1f1f1);
      box-shadow: none; }
      .sec-unit input[type=checkbox]:checked + .sec-unit-title + .sec-unit-content {
        display: block; }

.sec-file-img {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: #aaa;
  border-radius: 0.4rem;
  padding: 1.2rem;
  background: linear-gradient(#f1f1f1, #e1e1e1);
  box-shadow: 0 1px white inset;
  color: #000;
  font-size: 1.8rem;
  text-decoration: none;
  text-shadow: 0 1px 0 #FFF;
  vertical-align: middle;
  line-height: 1.5;
  white-space: nowrap;
  position: relative;
  padding: 5px; }
  .sec-file-img:active {
    background: linear-gradient(#e1e1e1, #f1f1f1); }

.sec-file-title {
  margin: 0.5rem 0 0;
  color: #000;
  word-break: break-all; }
  .sec-file-title:hover, .sec-file-title:active {
    text-decoration: underline; }

.sec-file-icon {
  position: absolute;
  top: 0.8rem;
  left: -0.4rem;
  line-height: 2.88rem;
  width: 4.32rem;
  height: 2.88rem;
  border-radius: 0 0.2rem 0.2rem 0;
  text-align: center;
  font-size: 2.4rem;
  text-shadow: none;
  color: #FFF; }
  .sec-file-icon::after {
    position: absolute;
    left: 0.1rem;
    bottom: -0.2rem;
    content: "";
    height: 0;
    width: 0;
    border-width: 0.2rem;
    border-style: solid;
    border-color: transparent;
    transform: rotate(-45deg);
    display: block; }

.sec-link {
  margin: 0 0.5rem;
  padding: 0; }
  .sec-link li {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0.5rem; }
  .sec-link a {
    font-size: 1.4rem;
    display: inline-block;
    text-decoration: none;
    position: relative;
    padding-left: 2.3rem;
    line-height: 1.5; }
    .sec-link a:hover, .sec-link a:active {
      text-decoration: underline; }
    .sec-link a::before {
      margin-right: 0.5rem;
      position: absolute;
      top: calc(50% - 0.9rem);
      left: 0;
      font-size: 1.8rem;
      margin-right: 1.0rem;
      line-height: 1; }

/* ---------------------

    preview page

--------------------- */
.sec-preview {
  display: flex; }
  .sec-preview-thumbs {
    padding-right: 15.5rem; }
    .sec-preview-thumbs img {
      border-width: 1px;
      border-style: solid;
      border-color: #ddd; }
      .sec-preview-thumbs img + img {
        margin-top: 1.5rem; }
  .sec-preview-btns {
    position: fixed;
    width: 14.0rem;
    right: 1.5rem;
    bottom: 0; }
    .sec-preview-btns a {
      display: block;
      border-style: solid;
      border-width: 1px;
      border-color: #aaa;
      border-radius: 0.4rem;
      padding: 1.2rem;
      background: linear-gradient(#f1f1f1, #e1e1e1);
      box-shadow: 0 1px white inset;
      color: #000;
      font-size: 1.8rem;
      text-decoration: none;
      text-shadow: 0 1px 0 #FFF;
      vertical-align: middle;
      line-height: 1.5;
      white-space: nowrap;
      padding: 1.2rem;
      font-size: 1.8rem;
      line-height: 3rem;
      position: relative;
      padding-left: 5.4rem;
      margin-bottom: 1.5rem; }
      .sec-preview-btns a:active {
        background: linear-gradient(#e1e1e1, #f1f1f1); }
      .sec-preview-btns a::before {
        position: absolute;
        top: calc(50% - 1.5rem);
        left: 1.2rem;
        font-size: 3rem; }

/* ---------------------

    thema colors

--------------------- */
.es-jp {
  background: #fdeeee; }
  .es-jp header {
    border-bottom-color: #d61717;
    background: #ec4d4d; }
  .es-jp .cmn-header-title {
    color: #fff; }
    .es-jp .cmn-header-title-main .label {
      background: #fff;
      color: #ec4d4d; }
  .es-jp .cmn-header-back a {
    border-color: #d61717; }
  .es-jp .sec-file-icon {
    background: #3799d6; }
    .es-jp .sec-file-icon::after {
      border-left-color: #257eb5; }
  .es-jp .sec-link a {
    color: #d61717; }

.es-math {
  background: #e6f8e1; }
  .es-math header {
    border-bottom-color: #2e731a;
    background: #3F9C24; }
  .es-math .cmn-header-title {
    color: #fff; }
    .es-math .cmn-header-title-main .label {
      background: #fff;
      color: #3F9C24; }
  .es-math .cmn-header-back a {
    border-color: #2e731a; }
  .es-math .sec-file-icon {
    background: #f9864a; }
    .es-math .sec-file-icon::after {
      border-left-color: #f76519; }
  .es-math .sec-link a {
    color: #2e731a; }

.es-science {
  background: #e5f4fd; }
  .es-science header {
    border-bottom-color: #127db7;
    background: #169de6; }
  .es-science .cmn-header-title {
    color: #fff; }
    .es-science .cmn-header-title-main .label {
      background: #fff;
      color: #169de6; }
  .es-science .cmn-header-back a {
    border-color: #127db7; }
  .es-science .sec-file-icon {
    background: #e6ad0d; }
    .es-science .sec-file-icon::after {
      border-left-color: #b6890a; }
  .es-science .sec-link a {
    color: #127db7; }

.es-social {
  background: #fcecdc; }
  .es-social header {
    border-bottom-color: #b0600f;
    background: #EA7211; }
  .es-social .cmn-header-title {
    color: #fff; }
    .es-social .cmn-header-title-main .label {
      background: #fff;
      color: #EA7211; }
  .es-social .cmn-header-back a {
    border-color: #b0600f; }
  .es-social .sec-file-icon {
    background: #816dd4; }
    .es-social .sec-file-icon::after {
      border-left-color: #5f46c8; }
  .es-social .sec-link a {
    color: #b0600f; }

.es-english {
  background: #f3ecf9; }
  .es-english header {
    border-bottom-color: #69319b;
    background: #9051C8; }
  .es-english .cmn-header-title {
    color: #fff; }
    .es-english .cmn-header-title-main .label {
      background: #fff;
      color: #9051C8; }
  .es-english .cmn-header-back a {
    border-color: #69319b; }
  .es-english .sec-file-icon {
    background: #54af75; }
    .es-english .sec-file-icon::after {
      border-left-color: #428e5e; }
  .es-english .sec-link a {
    color: #69319b; }