@charset "utf-8";

/*
reset
*/

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
em,
img,
strong,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
footer,
header,
section,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1.4;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/*
 * Style--------------------------------------------------
 */

@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}

@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}

@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, "Meiryo UI", Meiryo, "M+ 1p", "MS PGothic", sans-serif;
}


/* IE10以上 */

@media all and (-ms-high-contrast: none) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}


/*
 * teachers--------------------------------------------------
 */

#teachers {
  margin: 0 15px;
  padding: 0;
  margin-bottom:50px;

}

#teachers nav {
  margin: 10px;
  text-align: center;
}

#teachers h1 {
  text-align: center;  font-size: 1.7em;
  border-bottom: double 5px #6ad1c8;
}

#teachers menu {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

#teachers ul {
  margin: 10px 0;
}

#teachers ul li {
  float: left;
  padding: 0;
  margin: 0;
}

#teachers ul li:after {
  content: "　|　";
  white-space: pre;
}

#teachers ul li:last-child:after {
     content : none ;
 }

#teachers ul:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

#teachers p.atten:before {
  content: '●';
  color: royalblue;
  margin-right: 5px;
}

#teachers p a {
  padding-right:5px;
  padding-left:5px;
}

#teachers h2 {
  margin: 10px 0;
  padding: 10px;
  font-size: 1.2em;
}

#teachers h2 {
  position: relative;
}

#teachers h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

#teachers .btn_home,
#teachers .btn_catetop,
#teachers .btn_pagetop,
#teachers .btn_dl {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  margin:2px;
  text-decoration: none;
  color: #FFF;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  font-size: .9em;
}

#teachers .btn_home:visited,
#teachers .btn_catetop:visited,
#teachers .btn_pagetop:visited,
#teachers .btn_dl:hover {
  color: #FFF;
}

#teachers .btn_home:active,
#teachers .btn_catetop:active,
#teachers .btn_pagetop:active,
#teachers .btn_dl:active {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

#teachers .btn_home {
  background: #fd7f00;
  border: solid 2px #d86d02;
}

#teachers .btn_catetop {
  background: #00c626;
  border: solid 2px #00aa21;
}

#teachers .btn_pagetop {
  background: #666;
  border: solid 2px #555;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 20px;
}

#teachers .btn_dl {
  background: #356bfd;
  border: solid 2px #0012e5;
}

#teachers table {
  margin: 0 auto;
  width: 100%;
}

#teachers table th {
  border: 1px solid #ddd;
  text-align: center;
  background: #eee;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  font-size: .9em;
}

#teachers table td {
  border: 1px solid #ddd;
  vertical-align: middle;
  padding: 5px;
  margin: 5px;
}

#teachers table td:nth-of-type(1) {
  width: 25%;
}

#teachers table td:nth-of-type(2) {
  width: 10%;
  text-align: center;
  font-size: .8em;
}

#teachers table td:nth-of-type(3) {
  width: 40%;
}

#teachers table td:nth-of-type(4),
#teachers table td:nth-of-type(5){
  text-align: center;
}

@media screen and (max-width: 600px) {
  #teachers table thead,
  #teachers table tbody,
  #teachers table th,
  #teachers table tr,
  #teachers table td {
    display: block;
  }
  #teachers table td {
    width: 100%!important;
  }
  #teachers table thead {
    display: none;
  }
  #teachers table tbody tr {
    border: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  #teachers table td {
    border: none;
    padding: 0;
    margin: 0px;
  }
  #teachers table td p {
    padding: 5px;
    margin: 0px;
  }
  #teachers table td:before {
    display: block;
    background: #eee;
    padding: 5px;
    margin: 0 0 8px;
    content: attr(aria-label);
    text-align: center;
  }
}

#teachers span.new {
  height: .8em;
  line-height: 2em;
  font-size: .8em;
  padding: 1px 3px;
  margin: 0 5px;
  color: #fff;
  background: #00c4ff;
  border-radius: 3px;
  border: solid 1px #00a1d1;
}

#teachers span.atten{
    text-decoration: underline;
}

/*
 * worksheet.--------------------------------------------------
 */

#teachers dl.menu01 {
  line-height:2em;;
}

#teachers dl.menu01 dt {
  font-weight:bold;
  padding: 10px 0;
  display:inline-block
}

#teachers dl.menu01 dt:after {
  content: " ： ";
  white-space: pre;
}

#teachers dl.menu01 dd {
  display:inline-block;
}

#teachers dl.menu01 dd:after {
  content: "　|　";
  white-space: pre;
}

#teachers dl.menu01 dd:last-child:after {
     content : none ;
 }


@media screen and (min-width: 600px) {

.flex,
.flex2{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction:row;
    flex-direction:row;

}
.flex > div.worksheet{/*width:33%;*/width: calc(95% / 3);/*3等分*/}
.flex2 > div.worksheet{/*width:33%;*/width: calc(97% / 2);/*2等分*/}

}

div.worksheet{border:1px solid #666;border-radius:3px;padding:10px 20px;margin:5px;}
div.noframe{border:0px;}

div.worksheet dl {
}

div.worksheet dt {
  font-weight:bold;
  padding: 15px 0;
  display:inline;
  line-height:2em;
}

div.worksheet dt:nth-of-type(2):before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  border-top: solid 1px #555;
  margin-top:5px;
}

div.worksheet dt:after {
  content: " ： ";
  white-space: pre;
}

div.worksheet dt:last-of-type:before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  margin-top:10px;
}

/*div.worksheet dt:nth-of-type(5) {
  display:block;
}*/

div.worksheet dd {
  padding: 15px 0;
  display:inline;
  line-height:1.6em;
}

div.worksheet dd.thema {
  font-size:1.2em;
  color:#ff0000;
}
div.worksheet dd:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

div.worksheet dd.double:after {
  content: none;
}

div.worksheet dd.double a,
div.worksheet dd.triple a  {
  margin-bottom: 5px;
}