@charset "UTF-8";
/* =============================================================================
   Font size
============================================================================= */
/**
 *   8px - 50%
 *   9px - 56.3%
 *  10px - 62.5%
 *  11px - 68.8%
 *  12px - 75%
 *  13px - 81.3%
 *  14px - 87.5%
 *  15px - 93.8%
 *  --------------------
 *  16px - 100%
 *  --------------------
 *  17px - 106.3%
 *  18px - 112.5%
 *  19px - 118.8%
 *  20px - 125%
 *  21px - 131.3%
 *  22px - 137.5%
 *  23px - 143.8%
 *  24px - 150%
 *  25px - 156.3%
 *  26px - 162.5%
 *  27px - 168.8%
 *  28px - 175%
 *  29px - 181.3%
 *  30px - 187.5%
 *  31px - 193.8%
 *  32px - 200%
 */

/* Helvetica 類似フォント Open Sans */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

/* =============================================================================
   SmartPhone
============================================================================= */

/* ----------------------------------------------
   top page
---------------------------------------------- */
.contents-block {
  padding: 2.5rem 0.5rem 1.875rem;
}
#movie.contents-block {
  background-color: #141838;
}

.contents-block h2 {
  margin-bottom: 1.875rem;
}
.contents-block figure {
  width: 100%;
  margin-bottom: 1.5rem;
}
.contents-block nav {
  width: 10rem;
  margin: 0 auto;
}
.contents-block nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  border: 0.125rem solid #585882;
  color: #a2a7d3;
  font-size: 0.75rem;
  line-height: 1.0;
  text-align: center;
  text-decoration: none;
}
.contents-block nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 0.2rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-bottom: 0.2rem solid transparent;
  border-left: 0.4rem solid #a2a7d3;
}


/* ----------------------------------------------
   school-nav
---------------------------------------------- */
#school-nav {
  padding: 1.875rem 1rem;
  background-color: #0e1126;
}
#school-nav h2 {
  margin-bottom: 1rem;
}
#school-nav ul {
  width: 100%;
	border-bottom: 0.0625rem solid #293151;
}
#school-nav li {
  width: 100%;
	border-top: 0.0625rem solid #293151;
}
#school-nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  color: #a2a7d3;
  line-height: 1.5;
  text-decoration: none;
}
#school-nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 0.2rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-bottom: 0.2rem solid transparent;
  border-left: 0.4rem solid #a2a7d3;
}
#school-nav .thumb {
  display: inline-block;
  width: 2.5rem;
  vertical-align: middle;
}
#school-nav .text {
  display: inline-block;
  margin-left: 0.75rem;
  vertical-align: middle;
}
#school-nav .text h3 {
  color: #fff;
  font-size: 0.6875rem;
}
#school-nav .text p {
  color: #999;
  font-size: 0.625rem;
}

/* ----------------------------------------------
   list
---------------------------------------------- */
.icon {
  background: url(../images/common/icon.png);
  background-size: auto 1rem;
}
nav li a .icon {
  position: absolute;
  display: block;
  width: 1rem;
  height: 1rem;
  top: 50%;
  right: 1.75%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}
nav.collapsible {
  margin-bottom: 1.0rem;
}
nav.collapsible li.toggle {
  width: 100%;
  margin-bottom: 1px;
}
nav.collapsible li.toggle > a {
  display: block;
  position: relative;
  padding: 1rem 1.5rem 1rem 0.5rem;
  background: #25204f;
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
  text-decoration: none;
}
nav.collapsible li.toggle > a.opened {
  background: #0d1133;
}
nav.collapsible li.toggle a > img {
  width: 100%;
}
nav.collapsible li.toggle > div {
  display: none;
}
nav.collapsible li.toggle a.firstview + div {
  display: block;
}

.collapsible .toggle .icon {
  background-position: -100% 0;
}
.collapsible .toggle .opened .icon {
  background-position: -50% 0;
}


/* ----------------------------------------------
   article
---------------------------------------------- */
article {
  padding: 1.875rem 0.5rem;
}
article p {
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.6;
}
#message article p,
#timetable article p {
  text-align: center;
}
article p + p {
  margin-top: 1rem;
}

article section {
  margin-bottom: 1.75rem;
}
article section:last-child {
  margin-bottom: 0;
}
article section h1 {
  margin-bottom: 1.25rem;
}
figure + figure {
  margin-top: 1rem;
}
figure p {
  margin-bottom: 0.5rem;
}
figure img {
  width: 100%;
}
figure p,
figure a {
  color: #eeeeee;
}
figcaption {
  margin-bottom: 1rem;
  color: #afa6d5;
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1.6;
}
hr {
  width: 95%;
  margin: 0 auto 1rem;
  border-color: #4a437c;
}
.date,
.place {
  color: #afa6d5;
}
.gray {
  color: #eeeeee;
}
.medium {
  font-size: 0.875rem;
}

#timetable figure {
  width: 100%;
  margin: 2rem auto 0;
}


#contents .note {
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
}
#contents article {
  padding: 0.625rem 0;
}
#contents article section {
  margin-bottom: 1.25rem;
}
#contents article section:last-child {
  margin-bottom: 0;
}
#contents section h1 {
  padding: 0 0.5rem;
}
#contents .category-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.0;
  margin-bottom: 1.0rem;
  padding: 0 0.5rem;
}
#contents section figure {
  margin-bottom: 0.5rem;
}
#contents ul li > div .cooperation {
  margin: 0.75rem 0;
  color: #ccc;
  font-size: 0.625rem;
}
#contents section .cooperation img {
  display: inline-block;
  width: auto;
  max-height: 2.625rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
#contents ul li > div {
  padding: 0.5rem;
}

#contents ul li > div p {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #ccc;
  line-height: 1.3;
}
#contents ul li > div .theme {
  color: #fff;
  font-weight: bold;
}
#contents ul li > div .course {
  padding: 0.5rem;
  border: 0.0625rem solid #25204f;
  color: #afa6d5;
  font-size: 0.6875rem;
}
#contents .legend {
  margin: 0 0.5rem 2rem;
  padding: 0.5rem;
  border: 0.0625rem solid #81818d;
  color: #81818d;
  font-size: 0.625rem;
  line-height: 1.5;
}

#timetable section hr {
  margin-top: 1rem;
}


#location article > p {
  text-align: center;
}
#location hr {
  width: 100%;
  margin: 1.5rem auto;
  border-color: #4a437c;
}



/* =============================================================================
   Media Queries
============================================================================= */

@media screen and (min-width:481px) and (max-width:800px) { /* Smartphone(landscape),Tablet(portrait) */

}

@media screen and (max-width:480px) { /* Smartphone(portrait) */

}