/* Scss Document */
body {
  background-color: #fff7ed; }

#main a {
  text-decoration: none;
  border-bottom: #65341f 2px dotted; }

@media (max-width: 767px) {
  #header {
    background: url("../images/header_mobile@2x.png") no-repeat;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin: 1rem auto;
    background-size: contain;
    font-size: 0em; } }
@media (min-width: 768px) and (max-width: 1365px) {
  #header {
    background: url("../images/header_tablet@2x.png") no-repeat;
    width: 100%;
    height: 0;
    padding-bottom: 58.59375%;
    margin: 1rem auto;
    background-size: contain;
    font-size: 0em; } }
@media (min-width: 1366px) {
  #header {
    background: url("../images/header_desktop.png") no-repeat;
    width: 1366px;
    padding-bottom: 660px;
    height: 0;
    margin: 1rem auto;
    background-size: contain;
    font-size: 0em; } }

#main {
  line-height: 175%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #65341f; }
  @media (max-width: 767px) {
    #main {
      font-size: 0.9rem; } }
  @media (min-width: 768px) {
    #main {
      font-size: 1.1rem; } }

@media (max-width: 767px) {
  #movie {
    position: relative;
    width: 89.3%;
    padding-bottom: calc(9 / 16 * 89.3%);
    margin: 1rem auto;
    overflow: hidden; } }
@media (min-width: 768px) and (max-width: 1365px) {
  #movie {
    position: relative;
    width: 65%;
    padding-bottom: calc(9 / 16 * 65%);
    margin: 1rem auto;
    overflow: hidden; } }
@media (min-width: 1366px) {
  #movie {
    position: relative;
    width: 50%;
    padding-bottom: calc(9 / 16 * 50%);
    margin: 1rem auto;
    overflow: hidden; } }

#movie .tvo-video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0; }

#about {
  background-color: #fff;
  width: 94.6666666667%;
  padding: 0 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px; }
  @media (min-width: 1366px) {
    #about {
      width: 1366px; } }

#about h1 {
  margin: 0;
  padding: 2.6rem 0;
  text-align: center;
  color: #246055; }

@media (max-width: 767px) {
  #about h1 {
    padding: 1rem 0;
    font-size: 1.3rem; } }
#syllabus {
  background-color: #fff;
  width: 94.6666666667%;
  padding: 0 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px; }
  @media (min-width: 1366px) {
    #syllabus {
      width: 1366px; } }

#syllabus h1 {
  margin: 0;
  padding: 2.6rem 0;
  text-align: center;
  color: #246055; }

@media (max-width: 767px) {
  #syllabus h1 {
    padding: 1rem 0;
    font-size: 1.3rem; } }
#syllabus2 {
  background-color: #fff;
  width: 94.6666666667%;
  padding: 0 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px; }
  @media (min-width: 1366px) {
    #syllabus2 {
      width: 1366px; } }

#syllabus2 h1 {
  margin: 0;
  padding: 2.6rem 0;
  text-align: center;
  color: #246055; }

@media (max-width: 767px) {
  #syllabus2 h1 {
    padding: 1rem 0;
    font-size: 1.3rem; } }
#about ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin: 1rem auto; }
#about li {
  width: 16.6666666667%;
  padding: 1rem 2px; }
  @media (max-width: 767px) {
    #about li {
      width: 50%; } }

#syllabus ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 1rem auto; }
#syllabus li {
  width: 100%; }
  @media (min-width: 768px) {
    #syllabus li {
      width: 50%; } }
#syllabus dl {
  width: 100%; }
#syllabus dt {
  padding: 0.5rem 0;
  text-align: center;
  color: #fff; }
#syllabus .date0920 dt {
  background-color: #0072ff; }
#syllabus .date0927 dt {
  background-color: #fa1c51; }
#syllabus dd {
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem; }
#syllabus .date0920 dd {
  border: #0072ff 2px solid; }
#syllabus .date0927 dd {
  border: #fa1c51 2px solid; }
#syllabus img {
  margin: 2px 0;
  padding: 1px;
  border: #969696 1px solid; }
@media (min-width: 768px) {
  #syllabus #movie2 {
    width: 50%;
    margin: 2% auto; } }

#syllabus2 {
  /*ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 1rem auto;
  }
  li {
  width: 100%;
  @media (min-width: 768px) {
  width: 50%;
  }
  }*/ }
  #syllabus2 div.flex {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    width: 100%;
    margin: 1rem auto; }
  #syllabus2 dl {
    width: 100%; }
    @media (min-width: 768px) {
      #syllabus2 dl {
        width: 49%; } }
  #syllabus2 dt {
    padding: 0.5rem 0;
    text-align: center;
    color: #fff; }
  #syllabus2 .date0920 dt {
    background-color: #0072ff; }
  #syllabus2 .date0927 dt {
    background-color: #fa1c51; }
  #syllabus2 dd {
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem; }
  #syllabus2 .date0920 dd {
    border: #0072ff 2px solid; }
  #syllabus2 .date0927 dd {
    border: #fa1c51 2px solid; }
  #syllabus2 img {
    margin: 2px 0;
    padding: 1px;
    border: #969696 1px solid; }
  @media (min-width: 768px) {
    #syllabus2 #movie2 {
      /*width: 50%;*/
      margin: 2% auto; } }

#ttl_0920, #ttl_0927 {
  background-color: #fff;
  width: 50%;
  float: left; }
  #ttl_0920 img, #ttl_0927 img {
    border: none;
    margin: 0;
    padding: 0; }

#ttl_0920_after, #ttl_0927_after {
  background-color: #fff;
  width: 100%; }
  #ttl_0920_after img, #ttl_0927_after img {
    border: none;
    margin: 0;
    padding: 0; }