@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* Eric Meyer’s “Reset CSS” 2.0 */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@import url("https://fonts.googleapis.com/css?family=M+PLUS+1p");
@import url(din-webfont/din.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.brown {
  color: #857e2a; }

.blue {
  color: #1c499e; }

.t_green {
  color: #1e8e43; }

@keyframes rotate {
  100% {
    transform: rotate(360deg); } }
@keyframes float {
  0% {
    transform: translateY(-5%); }
  100% {
    transform: translateY(5%); } }
body {
  font-family: 'Noto Sans JP', sans-serif; }

#cover {
  display: none;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5); }
  #cover .cover_in {
    width: 90%;
    height: 0;
    padding-bottom: 64%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    align-items: center; }
    #cover .cover_in .close {
      z-index: 10000;
      width: 30px;
      height: 30px;
      position: absolute;
      top: -35px;
      right: 0; }
      #cover .cover_in .close span {
        display: block;
        width: 100%;
        height: 10px;
        background: #fff;
        transform-origin: center center;
        position: absolute;
        bottom: 50%; }
        #cover .cover_in .close span:first-child {
          transform: rotate(45deg); }
        #cover .cover_in .close span:last-child {
          transform: rotate(-45deg); }
    #cover .cover_in img {
      transform: translateY(50%);
      border: 15px solid #000; }

.modal {
  font-weight: normal !important; }
  .modal.red2 {
    color: #e72c2e; }
  .modal.blue2 {
    color: #1c499e; }
  .modal.green2 {
    color: #1e8e43;
    margin: 0; }
  .modal.yellow2 {
    color: #857e2a;
    margin: 0; }

.pc {
  display: none; }

.sp_n {
  display: none; }

@media screen and (max-width: 400px) {
  .sp_sm {
    display: none; } }
.sp-menu {
  display: block;
  width: 35px;
  height: 35px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  border: 1px solid #ddd;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000; }
  .sp-menu.m_active span {
    background: none;
    transition: .3s all ease; }
    .sp-menu.m_active span:after {
      transform: rotate(-45deg);
      top: 0;
      transition: .3s all ease; }
    .sp-menu.m_active span:before {
      transform: rotate(45deg);
      top: 0;
      transition: .3s all ease; }
  .sp-menu span {
    width: 70%;
    height: 2px;
    background: #00a0e9;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    transition: .3s all ease; }
    .sp-menu span:after, .sp-menu span:before {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0;
      background: #00a0e9;
      transform-origin: center center;
      transition: .3s all ease; }
    .sp-menu span:after {
      top: -10px;
      transition: .3s all ease; }
    .sp-menu span:before {
      top: 10px;
      transition: .3s all ease; }

.header {
  background: rgba(255, 255, 255, 0.85);
  width: 100%;
  height: 100vh;
  padding: 75px 2%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transform: translateX(-150%) skew(-20deg);
  font-family: 'DIN Pro Bold', sans-serif;
  transition: 0.3s all ease-out;
  display: block; }
  .header.active {
    transform: translateY(0);
    transition: 0.3s all ease-out; }
  .header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap; }
  .header li {
    flex: 0 1 100%;
    margin-bottom: 15px; }
    .header li:after {
      transform: scale(1, 1); }
    .header li:last-child:after {
      content: none; }
    .header li:hover::after {
      transform: none;
      transition: 0.3s all ease-out; }
    .header li.spacing {
      display: none; }
  .header a {
    color: #00a0e9;
    text-decoration: none;
    font-weight: normal;
    font-size: 125%; }
    .header a i {
      font-size: 1.5rem; }

/*sp-menu-------------------------------------------------*/
img {
  width: 100%; }

#wrap {
  background: url(../images/main_bg.jpg) no-repeat;
  background-size: 100%; }

section.main-v {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0; }
  section.main-v .chach {
    width: 75%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0; }
section.logo-e {
  box-sizing: border-box;
  width: 100%;
  padding: 0 2%; }
  section.logo-e a {
    text-align: center;
    display: block; }
  section.logo-e .btn {
    width: 75%;
    margin: 0 auto 30px; }
  section.logo-e .date {
    margin-bottom: 50px; }
    section.logo-e .date .read {
      color: red;
      font-weight: bold;
      font-size: 1.3em;
      line-height: 2;
      text-align: center;
      margin-bottom: 4%; }
section.schedule, section.news, section.detail, section.present, section.application {
  line-height: 1.6;
  background: #fff;
  box-sizing: border-box;
  margin: 0 5% 50px;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden; }
  section.schedule h1, section.news h1, section.detail h1, section.present h1, section.application h1 {
    text-align: center;
    font-weight: bold;
    color: white;
    padding: 15px 0;
    margin-bottom: 30px;
    font-size: 120%;
    line-height: 1; }
  section.schedule h2, section.news h2, section.detail h2, section.present h2, section.application h2 {
    width: 50%;
    height: 35px;
    margin-left: 3%;
    padding: 0 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #fff;
    border-radius: 20px 5px 20px 5px;
    position: relative;
    margin-bottom: 20px; }
    @media screen and (max-width: 400px) {
      section.schedule h2, section.news h2, section.detail h2, section.present h2, section.application h2 {
        width: 80% !important;
        font-size: .7em !important; } }
    section.schedule h2 span, section.news h2 span, section.detail h2 span, section.present h2 span, section.application h2 span {
      position: absolute;
      top: 0;
      width: 30px;
      height: 4px;
      background: #fff; }
      section.schedule h2 span:nth-child(1), section.news h2 span:nth-child(1), section.detail h2 span:nth-child(1), section.present h2 span:nth-child(1), section.application h2 span:nth-child(1) {
        top: 0;
        left: 35px;
        transform: skewX(-45deg); }
      section.schedule h2 span:nth-child(2), section.news h2 span:nth-child(2), section.detail h2 span:nth-child(2), section.present h2 span:nth-child(2), section.application h2 span:nth-child(2) {
        top: 0;
        left: 35px;
        transform: skewX(-45deg);
        left: 27px;
        transform: skewX(45deg); }
      section.schedule h2 span:nth-child(3), section.news h2 span:nth-child(3), section.detail h2 span:nth-child(3), section.present h2 span:nth-child(3), section.application h2 span:nth-child(3) {
        top: 0;
        left: 35px;
        transform: skewX(-45deg);
        top: auto;
        right: 35px;
        bottom: 0;
        left: auto;
        transform: skewX(-45deg); }
      section.schedule h2 span:nth-child(4), section.news h2 span:nth-child(4), section.detail h2 span:nth-child(4), section.present h2 span:nth-child(4), section.application h2 span:nth-child(4) {
        top: 0;
        left: 35px;
        transform: skewX(-45deg);
        top: auto;
        right: 27px;
        bottom: 0;
        left: auto;
        transform: skewX(45deg); }
    section.schedule h2 span, section.news h2 span, section.detail h2 span, section.present h2 span, section.application h2 span {
      width: 10px;
      height: 2px; }
section.schedule {
  overflow: visible;
  position: relative; }
  section.schedule .jelly {
    max-width: 100px;
    margin: 0 auto;
    position: absolute;
    left: -25px;
    top: -20px;
    z-index: 100;
    left: -30px;
    top: -50px; }
    section.schedule .jelly img {
      width: 100%; }
  section.schedule h1 {
    border-radius: 5px 5px 0 0;
    background: #a1cc54; }
  section.schedule dl {
    margin-bottom: 20px;
    padding: 0 3% 15px;
    line-height: 1.6;
    font-weight: bold; }
  section.schedule dd {
    color: #888; }
section.news h1 {
  border-radius: 5px 5px 0 0;
  background: #9a8ec3; }
section.news dl {
  margin-bottom: 20px;
  padding: 0 3% 15px; }
  section.news dl:last-child {
    margin-bottom: 0;
    padding-bottom: 35px; }
section.news dt {
  font-weight: bold; }
section.news dd {
  color: #888; }
section.detail h1 {
  background: #ed7994; }
section.detail h2 {
  background: #ed7994;
  border: 3px solid #fff;
  box-shadow: 1px 1px 5px 3px rgba(237, 121, 148, 0.5);
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
  font-size: 90%; }
  @media screen and (max-width: 300px) {
    section.detail h2 {
      font-size: 70% !important; } }
section.detail .lead {
  margin-bottom: 35px;
  padding: 0 3%; }
  section.detail .lead.glay {
    font-size: 95%;
    color: #888; }
section.detail .pink {
  color: #ed7994;
  margin-bottom: 20px;
  padding: 0 3%; }
  section.detail .pink dl {
    margin-bottom: 30px; }
    section.detail .pink dl dt {
      text-align: center; }
      section.detail .pink dl dt img {
        max-width: 250px; }
    section.detail .pink dl dd {
      color: #000; }
section.detail span.pink {
  display: block;
  margin-bottom: 10px;
  padding-left: 0;
  font-weight: bold;
  font-size: 110%; }
section.detail .green {
  color: #81bf24;
  padding: 0 3%;
  margin-bottom: 10px;
  font-size: 110%; }
section.present {
  position: relative;
  overflow: visible;
  padding-bottom: 20px; }
  section.present h1 {
    background: #f7af3a; }
  section.present h2 {
    background: #f7af3a;
    border: 3px solid #fff;
    box-shadow: 1px 1px 5px 3px rgba(247, 175, 58, 0.5);
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); }
  section.present li {
    margin-bottom: 30px; }
  section.present p.yellow {
    margin-bottom: 20px; }
  section.present .yellow {
    color: #f7af3a;
    padding: 0 3%; }
  section.present .img-box {
    border: 1px solid #f7af3a;
    padding: 1%; }
  section.present .f_12 {
    display: block;
    color: #888;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 90%; }
    @media screen and (max-width: 400px) {
      section.present .f_12 {
        font-size: .8em !important; } }
  section.present p:last-child {
    font-weight: bold; }
  section.present .happy {
    max-width: 100px;
    margin: 0 auto;
    position: absolute;
    left: -25px;
    top: -20px;
    z-index: 100; }
    section.present .happy img {
      width: 100%; }
section.application {
  position: relative;
  overflow: visible; }
  section.application h1 {
    border-radius: 5px 5px 0 0;
    background: #3c54a4; }
  section.application h2 {
    background: #86bce4;
    color: #fff100;
    width: 70%;
    border: 3px solid #fff;
    box-shadow: 1px 1px 5px 3px rgba(60, 84, 164, 0.5);
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
    font-size: 120%; }
    @media screen and (max-width: 400px) {
      section.application h2 {
        font-size: 100% !important; } }
    @media screen and (max-width: 300px) {
      section.application h2 {
        font-size: 80% !important; } }
  section.application ul {
    padding: 0 3%; }
    section.application ul li {
      margin-bottom: 10px; }
    section.application ul.glay {
      color: #888;
      padding-bottom: 20px; }
      section.application ul.glay li {
        padding-left: 1em;
        text-indent: -1em; }
  section.application h4 {
    color: #888;
    padding: 0 3%;
    margin-top: 25px; }
  section.application p {
    padding: 0 3%; }
  section.application .gmap {
    max-width: 100%;
    padding: 3%; }
    section.application .gmap iframe {
      width: 100%;
      height: 300px; }
  section.application .link-box {
    width: 75%;
    margin: 15px auto;
    background: #3c54a4;
    border-radius: 15px 5px 15px 5px;
    text-align: center;
    font-size: 1.3rem; }
    section.application .link-box .formlink {
      text-decoration: none;
      display: block;
      padding: 20px;
      color: #fff;
      font-weight: bold; }
      @media screen and (max-width: 400px) {
        section.application .link-box .formlink {
          font-size: .85rem !important; } }
      section.application .link-box .formlink .fa-envelope {
        margin-right: 10px; }
  section.application .f_12 {
    display: block;
    font-size: 85%; }
    @media screen and (max-width: 600px) {
      section.application .f_12 {
        padding-left: 1em;
        text-indent: -1em; } }
    section.application .f_12.block {
      margin: 0 3%;
      padding-left: 1em;
      text-indent: -1em; }
  section.application.mb p .small {
    font-size: .9em; }
  section.application.mb ul {
    padding: 3%; }
    section.application.mb ul li {
      margin-bottom: 2rem; }
      section.application.mb ul li img {
        border: 1px solid #1c499e;
        display: block; }

.red {
  color: red;
  font-weight: bold; }

footer {
  background: #000;
  padding: 5% 0; }
  footer .copy {
    color: #fff;
    text-align: center;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 80%; }

.toTop {
  display: none;
  width: 35px;
  height: 35px;
  position: fixed;
  bottom: 20px;
  right: 30px;
  background: #335599;
  border-radius: 50%;
  bottom: 55px; }
  .toTop.active {
    display: block; }
  .toTop span {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #fff;
    top: 30%;
    left: 35%; }
    .toTop span:first-child {
      transform: rotate(45deg) translateX(5px); }
    .toTop span:nth-child(2) {
      transform: rotate(-45deg) translateX(-5px); }

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