@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  z-index: 3;
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc; /*矢印の色*/
  border-right: 2px solid #ccc; /*矢印の色*/
  height: 25px;
  width: 25px;
}
@media (min-width: 200px) and (max-width: 500px) {
  .slick-prev,
  .slick-next {
    height: 15px;
    width: 15px;
  }
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -50px 0 0 0;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
}
@media (min-width: 200px) and (max-width: 500px) {
  .slick-dots button {
    visibility: hidden;
  }
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}
@media (min-width: 200px) and (max-width: 500px) {
  .slick-dots .slick-active button {
    visibility: hidden;
  }
}

.topimg {
  width:100%;
  height: 100vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image:url(../img/haikei/第65回工大祭テーマ背景.png);
  overflow: hidden;
}

.c-header {
  align-items: center;
  background-color: #eeeeee; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  min-width: 80px; /* カスタマイズしてください */
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0px; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #eeeeee; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}

@media screen and (max-width: 750px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}



.about {
  padding-bottom: 2rem;
}
.about__bio-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.about__bio-image p {
  margin-bottom: 2rem;
}
.about__bio {
  width: 80%;
  text-align: center;
}
.about__bio .h1 {
  padding-bottom: 1rem;
  font-size: 3rem;
  font-weight: 700;
  color: rgb(119, 25, 25);
}
.about .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.about footer {
  -webkit-transform: rotate(90deg) translate(-3rem, -5rem);
          transform: rotate(90deg) translate(-3rem, -5rem);
}

.jobs {
  width: 60vw;
  margin: 2rem auto 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  /*画面のサイズで文字の大きさを変化*/
  /*モーダルの横幅を変更したい場合*/
  /*モーダルのボタンの色を変更したい場合*/
}
.jobs__job {
  background-color: rgba(255, 255, 255, 0.632);
  padding: 0.5rem;
  border-bottom: 5px solid rgb(119, 25, 25);
}
.jobs__job h2,
.jobs__job h3 {
  margin: 0.5rem 0;
  color: black;
}
.jobs__job h6 {
  margin: 0.3rem 0;
}
.jobs__job p {
  line-height: 200%;
}
.jobs #info1, .jobs #info2, .jobs #info3, .jobs #info4, .jobs #info5, .jobs #info6, .jobs #info7, .jobs #info8, .jobs #info9 {
  display: none;
}
@media (min-width: 200px) {
  .jobs .jobs__job {
    font-size: 0.8rem;
  }
}
@media (min-width: 680px) {
  .jobs .jobs__job {
    font-size: 1.2rem;
  }
}
@media (min-width: 960px) {
  .jobs .jobs__job {
    font-size: 1.5rem;
  }
}
.jobs .modaal-container {
  font-size: 2rem;
  max-width: 600px;
}
.jobs .modal-content-container p {
  font-size: 50px;
}
.jobs .modaal-close:after,
.jobs .modaal-close:before {
  background: #ccc;
}
.jobs .modaal-close:focus:after,
.jobs .modaal-close:focus:before,
.jobs .modaal-close:hover:after,
.jobs .modaal-close:hover:before {
  background: #666;
}

.projects {
  padding-bottom: 2rem;
}
.projects__bio-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.projects__bio-image .text-secondary {
  font-size: 3rem;
  margin-bottom: 2rem;
}
@media (min-width: 200px) and (max-width: 500px) {
  .projects__bio-image .text-secondary {
    font-size: 1.5rem;
  }
}
.projects .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.projects footer {
  -webkit-transform: rotate(90deg) translate(-3rem, -5rem);
          transform: rotate(90deg) translate(-3rem, -5rem);
}

.content-projects {
  width: 80%;
  margin: auto;
}
.content-projects h1 {
  color: black;
  font-size: 2rem;
  padding-top: 50px;
  padding-bottom: 20px;
  text-align: center;
  margin: auto;
}
@media (min-width: 200px) and (max-width: 500px) {
  .content-projects h1 {
    font-size: 1rem;
  }
}
.content-projects p {
  color: black;
  padding-bottom: 50px;
  text-align: center;
  margin: auto;
}
@media (min-width: 200px) and (max-width: 500px) {
  .content-projects p {
    font-size: 0.8rem;
  }
}

.contact-row {
  margin-top: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}

.course-col {
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
  background: #fff3f3;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 20px 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.course-col:hover {
  -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
}

@media (max-width: 800px) {
  .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (max-width: 800px) {
  .contact-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.activities {
  margin: auto;
  text-align: center;
  color: black;
  padding-top: 10vh;
  width: 80%;
}
@media (min-width: 200px) {
  .activities {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .activities {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .activities {
    font-size: 1.5rem;
  }
}
.activities p {
  padding-bottom: 20px;
}
.activities h1 {
  padding-bottom: 20px;
}

.activities-col {
  -ms-flex-preferred-size: 32%;
      flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  overflow: hidden;
  background-size: cover;
}

.act-row1 img {
  width: 100%;
  border-radius: 8px;
  z-index: 2;
}

.row {
  width: 80%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (max-width: 800px) {
  .act-row1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.row_acti {
  width: 100%;
  text-align: center;
  margin: auto;
  display: inline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /*==================================================
  ふわっ
  ===================================*/
}
.row_acti .act-row1 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  padding: 3vh 3vh 3vh 3vh;
  background-color: rgb(255, 255, 255);
  width: 80%;
  margin-top: 5vh;
  margin-bottom: 5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*-webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  /*企画会議の設定*/
}

@media (min-width: 960px) {
  .row_acti .act-row1 {
    padding: 3vh 9vh 3vh 9vh;
  }
}
.row_acti .act-row1.scroll1 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.row_acti .act-row1 .act-text {
  padding-top: 5vh;
  padding-left: 3vh;
  padding-right: 3vh;
  line-height: 5vh;
  z-index: 1;
}

@media (min-width: 200px) and (max-width: 500px) {
  .row_acti .act-row1 .act-text {
    font-size: 0.8rem;
    line-height: 3vh;
  }
}
.row_acti .act-row1 .act-text .clap {
  width: auto;
  color: #fd5a4f;
  font-size: 120%;
}
.row_acti .act-row1 .actfes-text .clap {
  width: auto;
  color: #fd5a4f;
  font-size: 120%;
}
.row_acti .act-row1 .yoko {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
}
.row_acti .act-row1 .yoko .siryo {
  margin: auto;
}

.row_acti .act-row1 .yoko a {
  text-decoration: underline;
  line-height: 140%;
  margin-left: 3vh;
  margin-right: 3vh;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.row_acti .act-row1 .yoko a:hover {
  color: rgb(119, 25, 25);
}
.row_acti .act-row1 .yoko p {
  line-height: 200%;
  margin-left: 3vh;
}
.row_acti .act-row1 .yoko h1 {
  padding-bottom: 30px;
}
.row_acti .act-row1 .yoko h2 {
  padding-bottom: 30px;
}
@media (min-width: 200px) {
  .row_acti .act-row1 .yoko {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .row_acti .act-row1 .yoko {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .row_acti .act-row1 .yoko {
    font-size: 1.5rem;
  }
  .row_acti .act-row1 .yoko .siryo {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.row_acti .act-row1 .kikaku {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
  margin-bottom: 10vh;
}
.row_acti .act-row1 .kikaku a {
  text-decoration: underline;
  line-height: 140%;
  margin-left: 3vh;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.row_acti .act-row1 .kikaku a:hover {
  color: rgb(119, 25, 25);
}
.row_acti .act-row1 .kikaku p {
  line-height: 200%;
  margin-left: 3vh;
}
.row_acti .act-row1 .kikaku h1 {
  padding-bottom: 30px;
}
.row_acti .activities-col {
  opacity: 0;
}
.row_acti .fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.border1 {
  border-bottom: 2px solid black;
  padding-top: 5vh;
}

.border2 {
  border-top: 2px solid black;
  padding-top: 5vh;
}

.border3 {
  border-bottom: 2px solid black;
  padding-top: 5vh;
}

@media (min-width: 200px) and (max-width: 500px) {
  .border1 {
    border-bottom: 1px solid black;
    padding-top: 5vh;
  }
  .border2 {
    border-top: 1px solid black;
    padding-top: 5vh;
  }
  .border3 {
    border-bottom: 1px solid black;
    padding-top: 5vh;
  }
}
.contact-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.contact-image .text-secondary {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.contact-us {
  width: 80%;
  margin: auto;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
}
.contact-us h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 5vh;
  margin-bottom: 1rem;
  color: black;
}
@media (min-width: 200px) and (max-width: 500px) {
  .contact-us h2 {
    font-size: 2rem;
  }
}
@media (min-width: 960px) {
  .contact-us h2 {
    font-size: 2rem;
  }
}
.contact-us__list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  font-size: 1.5rem;
}

.footer {
  background-color: white;
  width: 100%;
  text-align: center;
  padding: 30px 0;
}
.footer .fa-2x {
  font-size: 3em;
}
.footer .sns-icons {
  width: 100%;
  margin: auto;
  position: initial;
  margin-top: 2rem;
}
.footer .sns-icons a {
  padding: 0.4rem;
}
.footer .sns-icons .twitter {
  color: black;
  margin-right: 2rem;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.footer .sns-icons .twitter:hover {
  color: rgb(7, 146, 233);
}
.footer .sns-icons .instagram {
  color: black;
  margin-right: 2rem;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.footer .sns-icons .instagram:hover {
  color: rgb(136, 58, 253);
}
.footer .sns-icons .youtube {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.footer .sns-icons .youtube:hover {
  color: rgb(255, 34, 34);
}

.footer h4 {
  color: black;
  margin-bottom: 25px;
  margin-top: 20px;
  font-weight: 600;
}

.fa-heart-o {
  margin-top: 20px;
  color: #f44336;
}

.contact-row {
  width: 80%;
  color: black;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.hero-btn {
  display: inline-block;
  text-decoration: none;
  color: rgb(230, 230, 230);
  border: 1px solid rgb(230, 230, 230);
  padding: 12px 34px;
  font-size: 13px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.hero-btn:hover {
  border: 1px solid rgb(119, 25, 25);
  background: rgb(119, 25, 25);
  -webkit-transition: 1s;
  transition: 1s;
}

.red-btn {
  border: 1px solid rgb(119, 25, 25);
  background: transparent;
  color: rgb(119, 25, 25);
}

.red-btn:hover {
  color: rgb(230, 230, 230);
}

.location {
  width: 80%;
  margin: auto;
  padding-top: 10vh;
  padding-bottom: 10vh;
}
.location h1 {
  font-size: 2.5rem;
  margin-bottom: 3vh;
  text-align: center;
  color: black;
}

.location iframe {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.contact-col {
  -ms-flex-preferred-size: 48%;
      flex-basis: 48%;
  margin-bottom: 30px;
}

.contact-col div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8vh;
}

.contact-col div .fa {
  font-size: 28px;
  color: rgb(119, 25, 25);
  margin: 10px;
  margin-right: 30px;
}

.contact-col div p {
  padding: 0;
}

.contact-col div h5 {
  font-size: 20px;
  margin-bottom: 5px;
  color: black;
  font-weight: 400;
}

.contact-col input,
.contact-col textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 17px;
  outline: none;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.border4 {
  padding-bottom: 5vh;
  border-bottom: 2px solid black;
}

@media (min-width: 200px) and (max-width: 500px) {
  .border4 {
    border-bottom: 1px solid black;
    padding-top: 5vh;
  }
}
.sportsfes {
  height: 40vh;
  width: 100%;
  margin-bottom: 3vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.sportsfes .text-secondary {
  font-size: 3rem;
  margin-bottom: 2rem;
}
.sportsfes .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.sportsfes-content {
  background-color: white;
  width: 80%;
  margin:10%;
  padding: 3vh 3vh 3vh 3vh;
}
@media (min-width: 200px) {
  .sportsfes-content {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .sportsfes-content {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .sportsfes-content {
    font-size: 1.5rem;
  }
}
.sportsfes-content .shirt {
  margin-top: 3vh;
  margin-bottom: 3vh;
}
.sportsfes-content .shirt p {
  margin-top: 2vh;
  margin-bottom: 2vh;
}
@media (min-width: 800px) {
  .sportsfes-content .shirt {
    margin-top: 5vh;
    margin-bottom: 5vh;
  }
}
@media (min-width: 800px) {
  .sportsfes-content {
    width: 80%;
    margin: auto;
  }
}

.sportsfes-sub {
  width: 60%;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: auto;
}
.sportsfes-sub a {
  text-decoration: underline;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.sportsfes-sub a:hover {
  color: rgb(119, 25, 25);
}
.sportsfes-sub h3 {
  margin-bottom: 2vh;
  line-height: 30px;
  text-align: left;
}
.sportsfes-sub p {
  margin-left: 3vh;
}
@media (min-width: 800px) {
  .sportsfes-sub {
    margin: auto;
    padding-top: 8vh;
    margin-bottom: 5vh;
  }
}
@media (min-width: 200px) {
  .sportsfes-sub {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .sportsfes-sub {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .sportsfes-sub {
    font-size: 1.5rem;
  }
}

.sportsfes-info {
  margin-top: 5%;
  margin: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
.sportsfes-info p {
  line-height: 200%;
}
.sportsfes-info h1 {
  padding-bottom: 50px;
}
.sportsfes-info .soccer-info {
  padding-bottom: 100px;
}
.sportsfes-info .baske-info {
  padding-bottom: 100px;
}
.sportsfes-info .valley-info {
  padding-bottom: 100px;
}

.sportsfes-col {
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
  border-radius: 10px;
  margin-bottom: 5%;
}

.sportsfes-col img {
  width: 100%;
  border-radius: 10px;
}

.sportsfes-col p {
  padding: 0;
}

.sportsfes-col h1 {
  margin-top: 16px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 2.8vh;
}

footer {
  height: 50px;
}

.schoolfes {
  height: 40vh;
  margin-bottom: 3vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.schoolfes .intro {
  width: 80%;
  margin: auto;
  text-align: center;
}
.schoolfes .intro h1 {
  padding-bottom: 20px;
  padding-top: 2rem;
}
.schoolfes .text-secondary {
  font-size: 2rem;
  margin-bottom: 2rem;
}
.schoolfes__items {
  width: 60vw;
  margin: 2rem auto 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}
.schoolfes__item {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.schoolfes__item img {
  width: 100%;
}
.schoolfes footer {
  -webkit-transform: rotate(90deg) translate(-3rem, -5rem);
          transform: rotate(90deg) translate(-3rem, -5rem);
}

@media screen and (min-width: 1060px) {
  .schoolfes__bio-image {
    height: 40vh;
  }
  .schoolfes__items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .schoolfes__items {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1600px) {
  .projects__bio-image {
    height: 50vh;
  }
}
@media (max-width: 800px) {
  .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (max-width: 800px) {
  .contact-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.schoolfes-content {
  font-size: 1rem;
  margin-top: 50vh;
  width: 80%;
  margin: auto;
  /*大学祭要項の設定*/
  /*企画会議の設定*/
}
.schoolfes-content .pamphlet {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
  margin-bottom: 10vh;
}
.schoolfes-content .pamphlet img {
  width: 90%;
  padding-bottom: 2vh;
}
.schoolfes-content .pamphlet .ptag {
  margin-left: 3vh;
  padding-left: 3vh;
}
@media (min-width: 680px) {
  .schoolfes-content .pamphlet .pamphlet_flex {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}
.schoolfes-content .pamphlet p {
  line-height: 200%;
  padding-right: 4vh;
  padding-bottom: 4vh;
}
.schoolfes-content .pamphlet h1 {
  padding-bottom: 30px;
}
@media (min-width: 200px) {
  .schoolfes-content .pamphlet {
    font-size: 1rem;
  }
}
@media (min-width: 880px) {
  .schoolfes-content .pamphlet {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .schoolfes-content .pamphlet {
    font-size: 1.5rem;
  }
}
.schoolfes-content .muropyon {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
  margin-bottom: 10vh;
}
.schoolfes-content .muropyon img {
  width: 90%;
  padding-bottom: 3vh;
}
@media (min-width: 1260px) {
  .schoolfes-content .muropyon .muropyon_flex {
    font-size: 1.5rem;
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .schoolfes-content .muropyon .muropyon_flex img {
    width: 80%;
  }
}
@media (min-width: 680px) {
  .schoolfes-content .muropyon .muropyon_flex .poster_img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}
.schoolfes-content .muropyon p {
  line-height: 200%;
  margin-left: 3vh;
}
@media (min-width: 960px) {
  .schoolfes-content .muropyon p {
    padding-right: 6vh;
    padding-left: 6vh;
  }
}
.schoolfes-content .muropyon h1 {
  padding-bottom: 30px;
}
@media (min-width: 200px) {
  .schoolfes-content .muropyon {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .schoolfes-content .muropyon {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .schoolfes-content .muropyon {
    font-size: 1.5rem;
  }
}
.schoolfes-content .karaoke {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
  margin-bottom: 10vh;
  /*hoverした際の変化*/
  /*差し替わるテキストの設定*/
  /*hoverするとテキストが入れ替わる設定*/
}
.schoolfes-content .karaoke .karaoke_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.schoolfes-content .karaoke a {
  text-decoration: underline;
  line-height: 140%;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.schoolfes-content .karaoke a:hover {
  color: rgb(119, 25, 25);
}
.schoolfes-content .karaoke p {
  line-height: 200%;
  margin-left: 3vh;
}
@media (min-width: 960px) {
  .schoolfes-content .karaoke p {
    padding-right: 6vh;
    padding-left: 6vh;
  }
}
.schoolfes-content .karaoke h1 {
  padding-bottom: 30px;
}
.schoolfes-content .karaoke h4 {
  padding-bottom: 8vh;
}
@media (min-width: 960px) {
  .schoolfes-content .karaoke h4 {
    padding-right: 30vh;
    padding-left: 30vh;
  }
}
@media (min-width: 200px) {
  .schoolfes-content .karaoke {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .schoolfes-content .karaoke {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .schoolfes-content .karaoke {
    font-size: 1.5rem;
  }
}
.schoolfes-content .karaoke img {
  width: 100%;
}
.schoolfes-content .karaoke .karaoke-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 3vh;
  margin-bottom: 3vh;
}
.schoolfes-content .karaoke .btntextchange {
  /*テキストの基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  border: 2px solid #555;
  border-radius: 25px;
  min-width: 250px;
  padding: 20px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: #333;
  outline: none;
  /*アニメーションの指定*/
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media (min-width: 200px) and (max-width: 680px) {
  .schoolfes-content .karaoke .btntextchange {
    min-width: 200px;
  }
}
@media (min-width: 960px) {
  .schoolfes-content .karaoke .btntextchange {
    min-width: 400px;
  }
}
.schoolfes-content .karaoke .btntextchange:hover {
  background: #333;
  color: #fff;
}
.schoolfes-content .karaoke .btntextchange span {
  /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*アニメーションの指定*/
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  /*ブロック要素にしてテキスト折り返しなし*/
  display: block;
  white-space: nowrap;
}
.schoolfes-content .karaoke .btntextchange span:nth-child(2) {
  opacity: 0;
  /*透過0に*/
}
.schoolfes-content .karaoke .btntextchange:hover span:nth-child(1) {
  opacity: 0;
  /*透過0に*/
}
.schoolfes-content .karaoke .btntextchange:hover span:nth-child(2) {
  opacity: 1;
  /*不透明に*/
}
.schoolfes-content .yoko {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
}
.schoolfes-content .yoko .siryo {
  margin: auto;
}

.schoolfes-content .yoko a {
  text-decoration: underline;
  line-height: 140%;
  margin-left: 3vh;
  margin-right: 3vh;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.schoolfes-content .yoko a:hover {
  color: rgb(119, 25, 25);
}
.schoolfes-content .yoko p {
  line-height: 200%;
  margin-left: 3vh;
}
.schoolfes-content .yoko h1 {
  padding-bottom: 30px;
}
.schoolfes-content .yoko h2 {
  padding-bottom: 30px;
}
@media (min-width: 200px) {
  .schoolfes-content .yoko {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .schoolfes-content .yoko {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .schoolfes-content .yoko {
    font-size: 1.5rem;
  }
  .schoolfes-content .yoko .siryo {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.schoolfes-content .kikaku {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
  margin-bottom: 10vh;
}
.schoolfes-content .kikaku a {
  text-decoration: underline;
  line-height: 140%;
  margin-left: 3vh;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.schoolfes-content .kikaku a:hover {
  color: rgb(119, 25, 25);
}
.schoolfes-content .kikaku p {
  line-height: 200%;
  margin-left: 3vh;
}
.schoolfes-content .kikaku h1 {
  padding-bottom: 30px;
}

@media (min-width: 200px) {
  .schoolfes-content {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .schoolfes-content {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .schoolfes-content {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 1060px) {
  .about__bio {
    font-size: 1.5rem;
  }
  .projects__bio-image {
    height: 40vh;
  }
  .projects__items {
    grid-template-columns: repeat(2, 1fr);
  }
  .projects .text-secondary {
    font-size: 3rem;
  }
  .about .text-secondary {
    font-size: 3rem;
  }
  .contact-image .text-secondary {
    font-size: 3rem;
  }
  .contact__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .projects__items {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1600px) {
  .projects__bio-image {
    height: 50vh;
  }
}
.visitor {
  padding-bottom: 2rem;
}
.visitor__bio-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.text-secondary {
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.visitor-content {
  color: rgba(0, 0, 0, 0.617);
  width: 60%;
  font-size: 1rem;
  margin-top: 5%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
.visitor-content h1 {
  padding-bottom: 50px;
}

.period iframe {
  width: 100%;
  padding-bottom: 50px;
}
.period .step {
  text-align: center;
}
.period .step h3 {
  padding-top: 10vh;
}

/*画面のサイズでタブの文字の大きさを変化*/
@media (min-width: 200px) {
  .maintab {
    font-size: 1rem;
  }
  .period .insyoku {
    font-size: 70%;
  }
  .period .insyoku iframe {
    height: auto;
  }
  .period .insyoku img {
    width: 100%;
    height: 100%;
    padding-top: 30px;
  }
}
@media (min-width: 680px) {
  .maintab {
    font-size: 1.5rem;
  }
  .period .insyoku {
    font-size: 100%;
  }
  .period .insyoku iframe {
    height: 30vh;
  }
  .period .insyoku img {
    width: 100%;
    height: 100%;
    padding-top: 30px;
  }
}
@media (min-width: 960px) {
  .maintab {
    font-size: 2rem;
  }
  .period .insyoku {
    font-size: 120%;
  }
  .period .insyoku iframe {
    height: 50vh;
  }
  .period .insyoku img {
    width: 80%;
    height: 80%;
    padding-top: 30px;
  }
}
/*tabの形状*/
.maintab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 20vw;
  margin-right: 20vw;
}

.maintab li a {
  color: black;
  display: block;
  background: #ddd;
  margin: 0 2px;
  padding: 10px 20px;
}

/*liにactiveクラスがついた時の形状*/
.maintab li.active a {
  background: rgb(215, 140, 78);
}

/*エリアの表示非表示と形状*/
.period {
  display: none;
  /*はじめは非表示*/
  opacity: 0;
  /*透過0*/
  padding: 50px 20px;
  font-size: 1rem;
  margin-top: 5%;
  width: 60%;
  margin: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  /*飲食エリアの利用・注文方法の設定*/
}
.period .insyoku {
  background-color: white;
  padding: 3vh 3vh 3vh 3vh;
  margin-bottom: 10vh;
  /*tabの形状*/
  /*liにactiveクラスがついた時の形状*/
  /*エリアの表示非表示と形状*/
  /*areaにis-activeというクラスがついた時の形状*/
}
.period .insyoku p {
  line-height: 200%;
  padding-bottom: 30px;
}
.period .insyoku h1 {
  padding-bottom: 30px;
}
.period .insyoku h2 {
  text-align: center;
  margin: 10px 0;
}
.period .insyoku h3 {
  text-align: center;
  font-weight: 400;
  margin: 10px 0;
}
.period .insyoku .area iframe {
  width: 100%;
  padding-bottom: 50px;
}
.period .insyoku .area .step {
  text-align: center;
}
.period .insyoku .area .step h3 {
  padding-top: 10vh;
}
.period .insyoku .tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.period .insyoku .tab li a {
  color: black;
  display: block;
  background: #ddd;
  margin: 0 2px;
  padding: 10px 20px;
}
.period .insyoku .tab li.active a {
  background: rgb(215, 140, 78);
}
.period .insyoku .area {
  display: none;
  /*はじめは非表示*/
  opacity: 0;
  /*透過0*/
  padding: 50px 20px;
}
.period .insyoku .area.is-active {
  display: block;
  /*表示*/
  -webkit-animation-name: displayAnime;
          animation-name: displayAnime;
  /*ふわっと表示させるためのアニメーション*/
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*areaにis-activeというクラスがついた時の形状*/
.period.is-active {
  display: block;
  /*表示*/
  -webkit-animation-name: displayAnime;
          animation-name: displayAnime;
  /*ふわっと表示させるためのアニメーション*/
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.corporate {
  padding-bottom: 2rem;
}
.corporate__bio-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.corporate__bio-image h1 {
  font-weight: 700;
}

.co-content {
  background-color: white;
  font-size: 1rem;
  margin-top: 100vh;
  width: 80%;
  margin: auto;
  padding: 3%;
}
.co-content p {
  line-height: 200%;
  padding-bottom: 2vh;
}
.co-content h1 {
  padding-bottom: 20px;
}

@media (min-width: 200px) {
  .co-content {
    font-size: 0.8rem;
  }
}
@media (min-width: 680px) {
  .co-content {
    font-size: 0.8rem;
  }
}
@media (min-width: 960px) {
  .co-content {
    font-size: 1.5rem;
  }
}
.spo-content {
  background-color: white;
  font-size: 1rem;
  width: 80%;
  margin: 10%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  /*hoverした際の変化*/
  /*差し替わるテキストの設定*/
  /*hoverするとテキストが入れ替わる設定*/
}
.spo-content p {
  line-height: 200%;
  padding-bottom: 2vh;
}
.spo-content h1 {
  padding-bottom: 20px;
}
.spo-content h2 {
  padding-bottom: 20px;
}
/*.spo-content .sponser_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}*/
.sponser_flex {
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:4vw;
  padding: 2rem;
  justify-items: center;
  align-items: center;
}

.sponser_flex img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: inline;
}


/*@media (min-width: 200px) and (max-width: 680px) {
  .spo-content .sponser_flex {
    display: contents;
  }
}
.spo-content .sponser {
  padding-top: 3vh;
  padding-right: 1vh;
  padding-left: 1vh;
  padding-bottom: 3vh;
}
@media (min-width: 960px) {
  .spo-content .sponser {
    padding-right: 6vh;
    padding-left: 6vh;
  }
}
.spo-content img {
  width: 30%;
  padding-bottom: 5vh;
}
@media (min-width: 200px) and (max-width: 680px) {
  .spo-content img {
    width: 100%;
  }
}*/

.spo-content .spo-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 3vh;
  margin-bottom: 3vh;
}
.spo-content .btntextchange {
  /*テキストの基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  border: 2px solid #555;
  border-radius: 25px;
  min-width: 210px;
  padding: 20px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: #333;
  outline: none;
  /*アニメーションの指定*/
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media (min-width: 960px) {
  .spo-content .btntextchange {
    min-width: 300px;
  }
}
.spo-content .btntextchange:hover {
  background: #333;
  color: #fff;
}
.spo-content .btntextchange span {
  /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*アニメーションの指定*/
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  /*ブロック要素にしてテキスト折り返しなし*/
  display: block;
  white-space: nowrap;
}
.spo-content .btntextchange span:nth-child(2) {
  opacity: 0;
  /*透過0に*/
}
.spo-content .btntextchange:hover span:nth-child(1) {
  opacity: 0;
  /*透過0に*/
}
.spo-content .btntextchange:hover span:nth-child(2) {
  opacity: 1;
  /*不透明に*/
}

.spo-footer {
  padding-top: 5vh;
}

@media (min-width: 200px) {
  .spo-content {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .spo-content {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .spo-content {
    font-size: 1rem;
  }
}
.sponsers {
  padding-bottom: 2rem;
}
.sponsers__bio-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.sponsers__bio-image .text-secondary {
  font-size: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 200px) and (max-width: 500px) {
  .sponsers__bio-image .text-secondary {
    font-size: 1.5rem;
  }
}
.sponsers .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.sponsers footer {
  -webkit-transform: rotate(90deg) translate(-3rem, -5rem);
          transform: rotate(90deg) translate(-3rem, -5rem);
}

.poster {
  width: 80%;
  margin: auto;
}
.poster img {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: block;
}

.activitiesfes {
  padding-bottom: 2rem;
}
.activitiesfes__bio-image {
  height: 40vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.activitiesfes .social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.activitiesfes footer {
  -webkit-transform: rotate(90deg) translate(-3rem, -5rem);
          transform: rotate(90deg) translate(-3rem, -5rem);
}

.row_actifes {
  width: 100%;
  margin: auto;
  display: inline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /*==================================================
  ふわっ
  ===================================*/
}
.row_actifes .act-row1 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  background-color: rgb(255, 255, 255);
  width: 80%;
  margin-top: 10vh;
  margin-bottom: 10vh;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  /*====スライダーのためのcss=====*/
  /*矢印の設定*/
  /*戻る、次へ矢印の位置*/
  /*ドットナビゲーションの設定*/
}
.row_actifes .act-row1.scroll1 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.row_actifes .act-row1 .actfes-text {
  width: 80%;
  margin: auto;
  padding-top: 5vh;
  padding-left: 3vh;
  padding-right: 3vh;
  line-height: 4vh;
  z-index: 1;
}
.row_actifes .act-row1 .actfes-text p {
  padding-top: 3vh;
  padding-bottom: 3vh;
}
.row_actifes .act-row1 .actfes-text p a {
  text-decoration: underline;
  color: rgb(63, 178, 255);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.row_actifes .act-row1 .actfes-text p a:hover {
  color: rgb(119, 25, 25);
}
@media (min-width: 200px) {
  .row_actifes .act-row1 .actfes-text {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .row_actifes .act-row1 .actfes-text {
    font-size: 1rem;
  }
}
@media (min-width: 960px) {
  .row_actifes .act-row1 .actfes-text {
    font-size: 1.5rem;
  }
}
.row_actifes .act-row1 .slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}
.row_actifes .act-row1 .slider img {
  width: 60vw;
  /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}
.row_actifes .act-row1 .slider .slick-slide {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  /*左右の画像のサイズを80%に*/
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;
  /*透過50%*/
}
.row_actifes .act-row1 .slider .slick-slide.slick-center {
  -webkit-transform: scale(1);
          transform: scale(1);
  /*中央の画像のサイズだけ等倍に*/
  opacity: 1;
  /*透過なし*/
}
.row_actifes .act-row1 .slick-prev,
.row_actifes .act-row1 .slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;
  /*矢印の色*/
  border-right: 2px solid #666;
  /*矢印の色*/
  height: 15px;
  width: 15px;
}
.row_actifes .act-row1 .slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.row_actifes .act-row1 .slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.row_actifes .act-row1 .slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}
.row_actifes .act-row1 .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.row_actifes .act-row1 .slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  /*ドットボタンのサイズ*/
  height: 8px;
  /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc;
  /*ドットボタンの色*/
}
.row_actifes .act-row1 .slick-dots .slick-active button {
  background: #333;
  /*ドットボタンの現在地表示の色*/
}

.row_actifes .activities-col {
  opacity: 0;
}
.row_actifes .fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* 画像付きテーブル
-------------------------------------*/
.exhibit {
  text-align: center;
}
.exhibit h1 {
  margin: 5%;
}
.exhibit h2 {
  margin: 15% 5% 30% 5%;  
}
table.table01 {
  width: 70%;/* テーブルの横幅 */
  border: #000 solid 2px;/* テーブル全体の罫線 */
  padding: 1%;
  margin: 20% auto;
 }
 table.table01 tbody th {
  background: #fff;/* 見出しの背景色 */
  color: rgb(119, 25, 25);/* 見出しの文字色 */
  padding:2px 2px;/* 見出しの上下・左右の余白 */
  border:#000 solid 1px;/* 見出しの罫線 */
  vertical-align:center;/* 見出しの縦位置（中央寄せ） */
  margin-top: 10px;
 }
 table.table01 tbody td.table01-img img{
  width:100%;/* 画像の横幅値 */
  height:100%;/* 画像の縦幅値 */
  padding: 15px;
  display:block;
 }
 table.table01 tbody td.table01-img{
  padding:10px;/* 画像自体の余白*/
 }
 table.table01 tbody td {
  background:#fff;/* 文章セルの背景色 */
  border:#000 solid 1px;/* 文章セルの罫線 */
  padding: 20px;/* 文章セルの上下・左右の余白 */
  vertical-align: middle;/* 文章セルの縦位置（中央寄せ） */
 }
 
 /* テーブルのレスポンシブデザイン */
 
 @media screen and (max-width: 780px) {
 .exhibit h1 {
    margin: 5%;
 }
 .exhibit h2 {
  font-size: 1em;
  margin-top: 70%;
  margin-bottom: 120%;
 }
 table.table01 tbody th {
  display:block;/* ブロック要素にしてセルの幅を100％にする */
  padding:5px;
 }
 table.table01 tbody td.table01-img{
  padding:50px;
 }
 table.table01 tbody td {
  display:block;
  font-size: 12px;
 }
 }

body {
  text-shadow: 2px 2px 3px rgba(51, 51, 51, 0.525);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.8))), url("../img/haikei/HP背景用.png") center;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8)), url("../img/haikei/HP背景用.png") center;
  background-size: cover;
  color: #000;
  height: 100vh;
  /*
  font-family: 'Dela Gothic One', cursive;
  font-family: 'Poppins', sans-serif;
  font-family: 'Rampart One', cursive;
  font-family: 'Train One', cursive;
  font-family: 'Yusei Magic', sans-serif;
  */
  font-family: "Dela Gothic One", cursive;
  font-family: "Poppins", sans-serif;
  font-family: "Rampart One", cursive;
  font-family: "Train One", cursive;
  font-family: "Yusei Magic", sans-serif;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  line-height: 1;
  background-repeat: repeat-y;
}
.attention1 {
  background-color: white;
  font-size: 1rem;
  width: 80%;
  margin: 2rem auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  
}
.attention1 h2 {
margin-bottom :2rem;
}
.attention2{
  margin: auto 2rem;
}
.attention2 li {
list-style-type: disc;
line-height: 2rem;
}
.map1 {
  background-color: white;
  font-size: 1rem;
  width: 80%;
  margin: 2rem auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  flex-direction:column;
  justify-content: center;
}
.map1 h1 {
  margin-bottom: 2rem;
  text-align: center;
}
.map1 h1::before {
  content:"";
  display: inline-block;
  width: 1.0em;
  height: 1.0em;
  margin-right: 0.5em;


  background-size: 100%;
  background-image: url("../img/64th/icons8-地図-80.png");
}

.map2 {
  min-width:auto;
  min-height:auto ;
  margin:2rem 0rem;
  border:5px solid transparent;
  border-radius:8px;
  display: flex;
  align-items:center;
  justify-content:center;
}
.map2 img{
  outline:5px solid rgba(0,0,0,.6);
  width:85%;
  height:85%;
  object-fit:cover;
  
}
h1,
h2,
h3 {
  font-weight: 400;
}

a {
  color: white;
  text-decoration: none;
  font-weight: 400;
}

.text-secondary {
  color: rgb(119, 25, 25);
}

header {
  position: fixed;
  z-index: 2;
  width: 100%;
  padding: 1rem;
}

main {
  height: 100%;
  width: 100%;
  /* スクロールをしたら出現する要素にはじめに透過0を指定 */
}
main .slider a {
  display: block;
  background-color: rgb(255, 255, 255);
  padding: 20px;
}
main .noticelist {
  display: block;
  background-color: rgb(255, 255, 255);
  padding: 20px;
}
main li {
  padding: 10px;
  list-style-type: none;
}
main .wrapper {
  width: 70%;
  margin: 0 auto;
  margin-top: 10vh;
  margin-bottom: 10vh;
  /*日付*/
  /*日付*/
}
main .wrapper h1 {
  text-align: center;
  color: rgb(215, 140, 78);
  padding-bottom: 2vh;
  font-size: 2.5rem;
  padding-left: 3vh;
}
@media (min-width: 200px) and (max-width: 500px) {
  main .wrapper h1 {
    font-size: 1.5rem;
  }
}
main .wrapper a {
  color: #333;
  text-decoration: none;
}
main .wrapper .slider span {
  display: inline-block;
  font-size: 0.8rem;
  margin-right: 10px;
  color: #777;
}
@media screen and (max-width: 768px) {
  main .wrapper .slider {
    padding: 20px;
    background: #fff;
  }
  main .wrapper .slider li {
    border-bottom: 1px dashed #ccc;
  }
  main .wrapper .slider li:last-child {
    border-bottom: none;
  }
  main .wrapper .slider span {
    display: block;
    padding-bottom: 10px;
  }
}
main .wrapper .noticelist span {
  display: inline-block;
  font-size: 0.8rem;
  margin-right: 10px;
  color: #777;
}
@media screen and (max-width: 768px) {
  main .wrapper .noticelist {
    padding: 20px;
    background: #fff;
  }
  main .wrapper .noticelist li {
    border-bottom: 1px dashed #ccc;
  }
  main .wrapper .noticelist li:last-child {
    border-bottom: none;
  }
  main .wrapper .noticelist span {
    display: block;
    padding-bottom: 10px;
  }
}
main .fadeUp {
  overflow: hidden;
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
main .fadeUpTrigger {
  opacity: 0;
}
main .social-icons {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
main .social-icons .twitter {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
main .social-icons .twitter:hover {
  color: rgb(7, 146, 233);
}
main .social-icons .instagram {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
main .social-icons .instagram:hover {
  color: rgb(136, 58, 253);
}
main .social-icons .youtube {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
main .social-icons .youtube:hover {
  color: rgb(255, 34, 34);
}
main .social-icons .twitter-sub {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
main .social-icons .twitter-sub:hover {
  color: rgb(7, 146, 233);
}
main .social-icons .instagram-sub {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
main .social-icons .instagram-sub:hover {
  color: rgb(136, 58, 253);
}
main .social-icons .youtube-sub {
  color: black;
  padding: 0.4rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
main .social-icons .youtube-sub:hover {
  color: rgb(255, 34, 34);
}
main .twitter-timeline {
  text-align: center;
  margin-top: 8vh;
}

.footer {
  bottom: 0.4rem;
  right: 1rem;
  text-align: center;
  padding: 1rem;
  color: black;
  background-color: white;
}
.footer .footer02 {
  color: black;
  text-align: center;
  padding: 30px;
}
.footer .footer01 a {
  color: black;
  text-decoration: none;
}
@media (min-width: 200px) {
  .footer .footer01 a {
    font-size: 1rem;
  }
}
@media (min-width: 680px) {
  .footer .footer01 a {
    font-size: 1.2rem;
  }
}
@media (min-width: 960px) {
  .footer .footer01 a {
    font-size: 1.5rem;
  }
}
.footer .footer01 a:hover {
  text-decoration: underline;
}
.footer .footer01 .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.footer .footer01 .menu__item.active > a {
  color: rgb(255, 134, 35);
}
.footer .footer01 .menu:hover {
  color: rgb(255, 134, 35);
}
.footer .footer01 .menu li {
  margin-top: 5vh;
  margin-bottom: 5vh;
  padding: 0 20px;
}/*# sourceMappingURL=main.css.map */