@charset "UTF-8";
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
main {
  /*background:url("../asset/movie/images/main_bg.jpg")no-repeat;
  background-size: cover;
  height: 640px;*/
  /* height: 100%;*/
  /* height: 100vh;*/
  overflow: hidden;
}
@media print, screen and (min-width:1201px) {
  main {
    margin: -40px 0 0 0;
  }
}
@media print, screen and (max-width:768px) {
  main {
    background: none;
    height: auto;
  }
}

.movieMain {
  height: 100%;
  /*height: 100vh;*/
  position: relative;
  width: 100%;
  margin: auto;
  text-align: center;
}
@media print, screen and (max-width:768px) {
  .movieMain {
    display: none;
  }
}

.movie {
  position: relative;
}

.banaBlock {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url("../asset/movie/images/movieBana_body.png") no-repeat;
  background-size: contain;
  width: 480px;
  /*height: ;*/
}
@media print, screen and (max-width:768px) {
  .banaBlock {
    background-size: 100% auto;
    width: 55%;
    margin: 50px auto 0;
  }
}
.banaBlock .btnInner {
  width: 75%;
  margin: 34% auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.banaBlock .btnInner .btn {
  width: 90%;
  transition: 1.5s;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
}
.banaBlock .btnInner .btn img {
  width: 100%;
}
.main_sp {
  width: 100%;
  padding: 50px 0 0 0;
}
@media all and (min-width: 769px) {
  .main_sp {
    display: none;
  }
}
.main_sp img {
  width: 100%;
}

/***********************************************************/
/* 2024．08追加 */
/***********************************************************/
.mv_area {
  padding: 0 5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  /*height: calc(100vh - 110px);*/
}
@media print, screen and (max-width:768px) {
  .mv_area {
    display: none;
  }
}
@media print, screen and (min-width: 1800px) {
  .mv_area {
    max-height: 1000px;
  }
}

.swiper-wrapper {
  height: 500px;
}
@media print, screen and (max-width: 400px) {
  .swiper-wrapper {
    height: 400px;
  }
}
.swiper-wrapper .inner {
  text-align: center;
  margin: 0 auto 0;
  /*display: contents;*/
  vertical-align: bottom;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.swiper-wrapper .inner img {
  width: 100%;
}
@media print, screen and (max-width: 1060px) {
  .swiper-wrapper .inner {
    width: 100%;
  }
}
@media print, screen and (max-width: 1400px) {
  .swiper-wrapper .inner {
    padding: 60px 0 0 0;
  }
}
@media print, screen and (min-width: 1700px) {
  .swiper-wrapper .inner {
    width: 1400px;
  }
}

.swiper-slide {
  height: auto !important;
}

.swiper-slide img {
  -webkit-transform: scale(1);
          transform: scale(1);
  /*スワイパーの切り替え速度と自動再生の停止時間を合計した秒数に設定する*/
  -webkit-transition: 7s;
  transition: 7s;
}

.swiper-slide._01, .swiper-slide._02 {
  background: #c3e4fd;
}

.swiper-slide._03, .swiper-slide._04, .swiper-slide._05 {
  background: #b5e4e6;
}

.swiper-slide._06, .swiper-slide._07 {
  background: #fbd7dd;
}

.swiper-slide._08, .swiper-slide._09 {
  background: #fdd8a1;
}

.swiper-slide._10, .swiper-slide._11 {
  background: #e4e1f3;
}

.swiper-slide._04, .swiper-slide._05 {
  position: relative;
}
.swiper-slide._04 .sw_inner, .swiper-slide._05 .sw_inner {
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.swiper-slide._04 .jissen_video, .swiper-slide._05 .jissen_video {
  position: absolute;
  right: 30px;
  bottom: 30px;
  max-width: 58%;
}
.swiper-slide._04 .jissen_video .video, .swiper-slide._05 .jissen_video .video {
  width: 100%;
  max-width: 920px;
}

.main_areaMenu p {
  cursor: pointer;
}

ul.main_areaMenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
ul.main_areaMenu li {
  width: 20%;
}
ul.main_areaMenu li:not(:last-child) {
  border-right: 1px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
ul.main_areaMenu li a {
  display: block;
  widows: 100%;
  background: #D99FA0;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 110%;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  height: 70px;
}
@media print, screen and (max-width:1026px) {
  ul.main_areaMenu li a {
    padding: 10px 10px;
  }
}
ul.main_areaMenu._sp {
  height: auto;
}
ul.main_areaMenu._sp li a {
  font-size: 10px;
  line-height: 1.5;
  padding: 10px 5px;
  height: 50px;
}
ul.main_areaMenu li.on a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
ul.main_areaMenu li.menu01 a {
  background: #6abbfb;
}
ul.main_areaMenu li.menu02 a {
  background: #46bcc1;
}
ul.main_areaMenu li.menu03 a {
  background: #f59baa;
}
ul.main_areaMenu li.menu04 a {
  background: #f99e14;
}
ul.main_areaMenu li.menu05 a {
  background: #bbb5e2;
}
ul.main_areaMenu li.menu01.on a {
  border-top: 5px solid #075484;
  height: 70px;
}
ul.main_areaMenu li.menu02.on a {
  border-top: 5px solid #0d8c8c;
  height: 70px;
}
ul.main_areaMenu li.menu03.on a {
  border-top: 5px solid #aa354f;
  height: 70px;
}
ul.main_areaMenu li.menu04.on a {
  border-top: 5px solid #ce7102;
  height: 70px;
}
ul.main_areaMenu li.menu05.on a {
  border-top: 5px solid #4848b7;
  height: 70px;
}
ul.main_areaMenu li.menu01._sp.on a {
  border-top: 3px solid #075484;
  height: 50px;
}
ul.main_areaMenu li.menu02._sp.on a {
  border-top: 3px solid #0d8c8c;
  height: 50px;
}
ul.main_areaMenu li.menu03._sp.on a {
  border-top: 3px solid #aa354f;
  height: 50px;
}
ul.main_areaMenu li.menu04._sp.on a {
  border-top: 3px solid #ce7102;
  height: 50px;
}
ul.main_areaMenu li.menu05._sp.on a {
  border-top: 3px solid #4848b7;
  height: 50px;
}

.main_sp .swiper-wrapper p {
  margin-bottom: 0;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.promotion .promoBana {
  max-width: 1000px;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  margin: 80px auto;
}
.promotion .promoBana img {
  width: 100%;
}
@media print, screen and (max-width:1026px) {
  .promotion .promoBana {
    max-width: 90%;
    margin: 40px auto;
  }
}
@media print, screen and (max-width:768px) {
  .promotion .promoBana {
    max-width: 98%;
    margin: 2rem auto 2.5rem;
  }
}
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.movieHomeBlock {
  top: 86px; /* 共通ヘッダー関連で追加 */
}

.mainVisual {
  top: 86px;
}

/****************************************************************************************************

グロナビ

****************************************************************************************************/
/*.global_navi{
    top: calc( 35px + 86px );
}*/
/****************************************************************************************************

サイドナビ

****************************************************************************************************/
.side_navi {
  top: 121px;
}

@media print, screen and (max-width:1200px) {
  .side_navi {
    top: 201px;
  }
}
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.iconArea {
  margin: 80px auto 30px;
  max-width: 310px;
}
@media print, screen and (max-width:1026px) {
  .iconArea {
    margin: 60px auto 30px;
  }
}
@media print, screen and (max-width:768px) {
  .iconArea {
    display: none;
  }
}
.iconArea ul {
  width: 100%;
}
.iconArea li {
  border-radius: 30px;
  width: 40px;
}
.iconArea li img {
  width: 100%;
}
.iconArea li:hover {
  opacity: 0.7;
}

.iconArea_sp {
  max-width: 70%;
  margin: 1.4rem auto 2rem;
  padding: 0 0 85px;
}
@media all and (min-width: 769px) {
  .iconArea_sp {
    display: none;
  }
}
.iconArea_sp ul {
  width: 100%;
}
.iconArea_sp li {
  border-radius: 30px;
  width: 35px;
}
.iconArea_sp li img {
  width: 100%;
}
.iconArea_sp li:hover {
  opacity: 0.7;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.media {
  margin: 60px auto 160px;
}
@media print, screen and (max-width:1026px) {
  .media {
    margin: 60px auto 100px;
  }
}
@media print, screen and (max-width:768px) {
  .media {
    margin-bottom: 5.5em;
  }
}
.media h2 {
  text-align: center;
  /* margin-bottom:30px;*/
}

.media_container {
  max-width: 1036px;
  margin: 0 auto;
}

@media print, screen and (min-width:1201px) {
  .media_container {
    padding: 0%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
@media all and (max-width: 900px) {
  .media_container {
    width: 80%;
    margin: 0 auto;
  }
}
.linkTxt a {
  color: #00468B;
  text-decoration: underline;
}

.linkTxt a:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 3px;
  border-width: 1px 1px 0 0;
  border-color: #00468B;
  border-style: solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: 0.15em;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.important {
  /*background:url("../images/top/bg/dot_bg.png");*/
  background: #1ab6ca;
  /*background:#b5dce1;*/
  width: 100%;
  padding: 30px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media print, screen and (max-width:768px) {
  .important {
    padding: 1rem 0;
  }
}
.important .wrap {
  width: 1200px;
  margin: 0 auto;
}
@media print, screen and (max-width:1200px) {
  .important .wrap {
    width: 94%;
  }
}
@media print, screen and (max-width:768px) {
  .important .wrap {
    margin: 1.5rem auto;
  }
}
.important dl {
  border: 2px solid #040000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 8px;
}
.important dl dt {
  padding: 10px 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #f4b4c4;
  width: 15%;
  border-right: 2px solid #040000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.3;
}
@media print, screen and (max-width:1026px) {
  .important dl dt {
    width: 20%;
    padding: 10px 20px;
  }
}
@media print, screen and (max-width:768px) {
  .important dl dt {
    width: 100%;
    padding: 7px;
    border-right: none;
    border-bottom: 2px solid #040000;
  }
}
.important dl dd {
  background: #fff;
  padding: 10px 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 85%;
  font-size: 100%;
  overflow: hidden;
  /*.inner{
  width: 100%;
   display: inline-block;
    color: #fff;
    padding-left: 100%;
    white-space: nowrap;
    animation: animate-banner 30s linear infinite;
    @include g.mq(sp){
    width: auto;
    animation: animate-banner 40s linear infinite;
    } 
  p{
  display: inline-block;
  margin-right:60px;
  margin-bottom: 0 !important;
  @include g.mq(sp){margin-right:30px;}
  }
  @keyframes animate-banner {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}  
  }
  }*/
}
@media print, screen and (max-width:1026px) {
  .important dl dd {
    width: 80%;
    padding: 10px 20px;
  }
}
@media print, screen and (max-width:768px) {
  .important dl dd {
    width: 100%;
    padding: 8px 8px;
  }
}
.important dl dd a {
  display: block;
}
.important dl dd a:not(:last-child) {
  margin: 0 0 1rem;
}
.important dl dd dl {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /*justify-content: space-between;*/
}
.important dl dd dl dt {
  /*width: 10%;*/
  width: auto;
  border: none;
  margin-right: 1.2rem;
  background: none;
  padding: 0;
  display: block;
  line-height: inherit;
}
.important dl dd dl dd {
  /*width: 85%;*/
  width: auto;
  padding: 0;
}
.important dl dd a {
  color: #231815;
  text-decoration: none;
  animation: 3s ease-in 1s infinite reverse both running slidein;
}
.important dl dd a:hover {
  text-decoration: underline;
}
.important .newsBox {
  width: 90%;
}
@media print, screen and (max-width:768px) {
  .important .newsBox {
    width: 100%;
  }
}
.important .newsBtn {
  width: 8%;
  margin: 7px 0 0 0;
  line-height: 1.3;
}
@media print, screen and (max-width:768px) {
  .important .newsBtn {
    width: 80%;
    margin: 1rem auto 0;
  }
  .important .newsBtn a {
    padding: 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.about {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 40px auto 0;
}
@media print, screen and (max-width:768px) {
  .about {
    padding: 1rem 0 0;
    margin: 20px auto 0;
  }
}
.about .wrap {
  width: 1200px;
  margin: 0 auto;
}
@media print, screen and (max-width:1200px) {
  .about .wrap {
    width: 94%;
  }
}
.about .inner {
  /*background:linear-gradient(45deg, #dbf0e8,#e2f3ec,#d2e7ec,#b9cbe0);*/ /*グラデーションを定義*/
  /*background-size: 200% 200%;*/ /*サイズを大きくひきのばす*/
  /*animation: bggradient 20s ease infinite;*/
  background: #d2e7ec;
  border-top: 2px solid #040000;
  padding: 30px 0;
  /*height: 100vh;*/
}
@media print, screen and (max-width:1026px) {
  .about .inner {
    padding: 10px 0;
  }
}
@media print, screen and (max-width:768px) {
  .about .inner {
    padding: 0 0 1.8rem;
  }
}
@-webkit-keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/***********************************************************/
/* タイトル */
/***********************************************************/
.text_aboutTitle {
  color: #fff;
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1em;
  padding: 5px;
  background: #000;
  margin: 0 auto 25px;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (max-width: 1026px) {
  .text_aboutTitle {
    font-size: 2rem;
  }
}
@media print, screen and (max-width: 768px) {
  .text_aboutTitle {
    font-size: 1.7rem;
    margin: 0 auto 1rem;
  }
}
.aboutTitle {
  text-align: center;
  margin: 0 auto 10px;
}
@media print, screen and (max-width:1026px) {
  .aboutTitle {
    width: 80%;
  }
  .aboutTitle img {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .aboutTitle {
    width: 90%;
  }
}

/***********************************************************/
/* タブ */
/***********************************************************/
.tabList {
  z-index: 50;
  position: relative;
}

.tab_link {
  font-size: 1.8rem;
  border-bottom: 2px solid #040000;
  position: relative;
  display: block;
  text-decoration: none;
  color: #444;
  cursor: pointer;
  padding: 27px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media print, screen and (max-width:1026px) {
  .tab_link {
    font-size: 1.55rem;
    padding: 23px 0;
  }
}
@media print, screen and (max-width:768px) {
  .tab_link {
    font-size: 1.2rem;
    letter-spacing: 0.05rem;
    padding: 20px 0;
  }
}
.tab_link.active {
  border-bottom: 2px solid #d2e7ec;
  background: #d2e7ec;
  /*background:linear-gradient(45deg, #dbf0e8,#e2f3ec,#d2e7ec,#b9cbe0);*/
}
.tab_link:before {
  content: "";
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /*色や形状*/
  background: #d2e7ec; /*背景色*/
  width: 100%;
  height: 100%;
  /*アニメーション*/
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.tab_link:hover:before {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.tab_link span {
  width: 100%;
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.tab_link {
  width: 19%;
  text-align: center;
  margin: 0 auto;
  border-top: 2px solid #040000;
  border-left: 2px solid #040000;
  border-right: 2px solid #040000;
  margin: 0 0 -2px 0;
  background: #fff;
}
@media print, screen and (max-width:768px) {
  .tab_link {
    width: 19.5%;
    line-height: 1.3rem;
    font-size: 94%;
  }
}
.tab_link a {
  color: #231815;
}

/*liにactiveクラスがついた時の形状*/
/*.tabList li.active a{
  background:#fff;
}
*/
/*エリアの表示非表示と形状*/
.area {
  display: none; /*はじめは非表示*/
  opacity: 0; /*透過0*/
  padding: 20px 0px;
}

/*areaにis-activeというクラスがついた時の形状*/
.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;
  }
}
/*  .tab_link.on:before {
    width: 100%;
  }

  .tab-body {
    position: relative;
    overflow:hidden;
  }
  .tab-body__item {
    position: absolute;
    width: 100%;
    margin: 30px 0;
    text-align: center;
    opacity: 0;
    transition: all 0.6s ease-out;
  }
  .tab-body__item.on {
    opacity: 1;
  }

*/
/***********************************************************/
/* pickup */
/***********************************************************/
.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 94%;
  margin: 0 auto;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.l-inner ._wrap {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

.pickup {
  width: 100%;
  margin: 0 auto 60px;
  overflow: hidden;
}
@media print, screen and (max-width:768px) {
  .pickup {
    margin: 0 auto 2rem;
  }
}

.pickup .swiper02 {
  overflow: visible;
}

.pickup .banaBox {
  width: 100%;
}
@media print, screen and (max-width:480px) {
  .pickup .banaBox {
    width: 80%;
    margin: 0 auto;
  }
}

.pickup .banaBox .img {
  position: relative;
  margin-bottom: 0.5em !important;
  width: 100%;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media print, screen and (max-width:768px) {
  .pickup .banaBox .img {
    padding: 0 10px;
  }
}
@media print, screen and (max-width: 600px) {
  .pickup .banaBox .img {
    padding: 0 40px;
  }
}
@media print, screen and (max-width:480px) {
  .pickup .banaBox .img {
    padding: 0 10px;
  }
  .pickup .banaBox .img img {
    width: 100%;
    padding: 0;
  }
}

@media print, screen and (max-width: 768px) {
  .pickup .banaBox .img {
    margin-bottom: 0.2em !important;
  }
}
.pickup .banaBox .img img {
  width: 100%;
}

.pickup .banaBox .img span {
  font-size: 90%;
  position: absolute;
  left: -10px;
  bottom: 5px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
@media print, screen and (max-width:768px) {
  .pickup .banaBox .img span {
    left: -10px;
  }
}
@media print, screen and (max-width:480px) {
  .pickup .banaBox .img span {
    left: -10px;
    font-size: 50%;
  }
}

/*.pickup .banaBox .img{
 overflow:hidden;
}*/
.pickup .banaBox .img img {
  -webkit-transition: 1s all;
  transition: 1s all;
}

.pickup .banaBox .img img:hover {
  -webkit-transform: scale(1.05, 1.05);
          transform: scale(1.05, 1.05);
  -webkit-transition: 1s all;
  transition: 1s all;
}

a.swiper-slide {
  text-decoration: none;
  color: #231815;
}

.pickup .banaBox .txt {
  text-align: center;
  font-size: 100%;
  line-height: 1.5;
}
@media print, screen and (max-width:768px) {
  .pickup .banaBox .txt {
    font-size: 90%;
  }
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 34px !important;
  width: 34px !important;
}
@media print, screen and (max-width:768px) {
  .swiper-button-prev,
  .swiper-button-next {
    height: 24px !important;
    width: 24px !important;
  }
}

/* 前へ次への矢印カスタマイズ */
/*.swiper-button-prev:after,
.swiper-button-next:after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 34px;
  margin: auto;
  width: 34px;
}*/
/* 前への矢印カスタマイズ */
.swiper-button-prev {
  background-image: url("../images/top/about/arrow_l.png");
  background-repeat: no-repeat;
}

/* 次への矢印カスタマイズ */
.swiper-button-next {
  background-image: url("../images/top/about/arrow_r.png");
  background-repeat: no-repeat;
}

/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-button-next::after, .swiper-button-prev::after {
  content: none !important;
}

@media print, screen and (max-width:768px) {
  .swiper-button-prev, .swiper-button-next {
    background-size: 100% auto !important;
  }
  .swiper-button-prev {
    left: 0 !important;
  }
  .swiper-button-next {
    right: 0 !important;
  }
}
/*.pickup .slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
  border-radius: 4px;
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}




  .pickup .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .pickup .slide:hover {
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
    -webkit-box-shadow: var(--box-shadow-hover);
            box-shadow: var(--box-shadow-hover);
  }
  .pickup .slide:hover img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }


.pickup .banaBox img {
  height: calc(100% + 16px);
   -webkit-transform: translateY(-16px); 
   transform: translateY(-16px); 
}
.pickup .slide-content {
  padding: 3.2rem;
}
.pickup .slide-date {
  font-size: 1.2rem;
  line-height: 1;
  display: block;
  color: var(--color-theme);
}
.pickup .slide-title {
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3.2em;
  margin-top: 1.6rem;
}
.pickup .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  opacity: 0.3;
}

*/
/***********************************************************/
/* recommend */
/***********************************************************/
.btnBox {
  margin: 35px auto 0;
  width: 100%;
}
@media print, screen and (max-width:768px) {
  .btnBox {
    margin: 25px auto 0;
    padding: 0 0 0 5px;
  }
}
@media print, screen and (max-width:320px) {
  .btnBox {
    padding: 0 0 0 5px;
  }
}
.btnBox::before {
  content: "";
  display: block;
  width: 23%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.btnBox::after {
  content: "";
  display: block;
  width: 23%;
}
.btnBox .btn_nomal {
  margin-bottom: 20px; /*width: 23%;*/
}
@media print, screen and (max-width:1200px) {
  .btnBox .btn_nomal {
    width: 23%;
  }
}
@media print, screen and (max-width:768px) {
  .btnBox .btn_nomal {
    width: 48%;
  }
}

.btnBox_circle {
  max-width: 980px;
  margin: 40px auto 40px;
}
@media print, screen and (max-width:1200px) {
  .btnBox_circle {
    max-width: 960px;
  }
}
@media print, screen and (max-width: 1100px) {
  .btnBox_circle {
    max-width: 940px;
  }
}
@media print, screen and (max-width: 1060px) {
  .btnBox_circle {
    max-width: 94%;
  }
}
@media print, screen and (max-width:1026px) {
  .btnBox_circle {
    max-width: 80%;
  }
}
@media print, screen and (max-width: 920px) {
  .btnBox_circle {
    max-width: 94%;
  }
}
@media print, screen and (max-width:768px) {
  .btnBox_circle {
    max-width: 84%;
  }
}
@media print, screen and (max-width: 660px) {
  .btnBox_circle {
    max-width: 94%;
  }
}
@media print, screen and (max-width:480px) {
  .btnBox_circle {
    max-width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .btnBox_circle.flex {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.btnBox_circle .btn_circle {
  margin-bottom: 20px; /*width: 23%;*/
  /*@include g.mq(pcN){width: 23%;}*/
  /*@media print, screen and (max-width: 400px) {
  &:nth-child(1),&:nth-child(3){margin-right: 15px;}
  &:nth-child(2),&:nth-child(4),&:nth-child(5){margin-right: 0px;}
  }*/
}
@media print, screen and (max-width:768px) {
  .btnBox_circle .btn_circle:nth-child(1), .btnBox_circle .btn_circle:nth-child(2), .btnBox_circle .btn_circle:nth-child(4) {
    margin-right: 15px;
  }
}
@media print, screen and (max-width: 500px) {
  .btnBox_circle .btn_circle:nth-child(1), .btnBox_circle .btn_circle:nth-child(2), .btnBox_circle .btn_circle:nth-child(4) {
    margin-right: 12px;
  }
  .btnBox_circle .btn_circle:nth-child(3), .btnBox_circle .btn_circle:nth-child(5) {
    margin-right: 0px;
  }
}
@media print, screen and (max-width: 460px) {
  .btnBox_circle .btn_circle:nth-child(1), .btnBox_circle .btn_circle:nth-child(2), .btnBox_circle .btn_circle:nth-child(3), .btnBox_circle .btn_circle:nth-child(4) {
    margin-right: 10px;
  }
  .btnBox_circle .btn_circle:nth-child(3), .btnBox_circle .btn_circle:nth-child(5) {
    margin-right: 0px;
  }
}
@media print, screen and (max-width: 400px) {
  .btnBox_circle .btn_circle:nth-child(1), .btnBox_circle .btn_circle:nth-child(3), .btnBox_circle .btn_circle:nth-child(4) {
    margin-right: 6px;
  }
  .btnBox_circle .btn_circle:nth-child(2), .btnBox_circle .btn_circle:nth-child(5) {
    margin-right: 0px;
  }
}
@media print, screen and (max-width: 376px) {
  .btnBox_circle .btn_circle:nth-child(1), .btnBox_circle .btn_circle:nth-child(3), .btnBox_circle .btn_circle:nth-child(4) {
    margin-right: 10px;
  }
  .btnBox_circle .btn_circle:nth-child(2), .btnBox_circle .btn_circle:nth-child(5) {
    margin-right: 0px;
  }
}
@media print, screen and (max-width: 360px) {
  .btnBox_circle .btn_circle:nth-child(1), .btnBox_circle .btn_circle:nth-child(2), .btnBox_circle .btn_circle:nth-child(3) {
    margin-right: 6px;
  }
  .btnBox_circle .btn_circle:nth-child(4), .btnBox_circle .btn_circle:nth-child(5) {
    margin-right: 0px;
  }
}

/***********************************************************/
/* guidebook */
/***********************************************************/
.guidebook_fac {
  width: 100%;
  margin: 0 auto 60px;
  overflow: hidden;
}
@media print, screen and (max-width:1026px) {
  .guidebook_fac {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .guidebook_fac {
    margin: 0 auto 2rem;
  }
}
.guidebook_fac .child {
  max-width: 280px;
}
.guidebook_fac .child a {
  text-decoration: none;
  color: #000;
}
.guidebook_fac .child a:hover {
  text-decoration: underline;
}
.guidebook_fac .balloon {
  position: relative;
  margin: 0 auto 20px;
  padding: 10px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.05em;
  background-color: #fff;
  -webkit-filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
}
@media print, screen and (max-width:1200px) {
  .guidebook_fac .balloon {
    font-size: 1.2rem;
  }
}
@media print, screen and (max-width:768px) {
  .guidebook_fac .balloon {
    font-size: 1.1rem;
  }
}
.guidebook_fac .balloon::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
}
@media print, screen and (max-width:1026px) {
  .guidebook_fac .img img {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .guidebook_fac .img {
    padding: 0 10%;
  }
}
.guidebook_fac .img:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.guidebook .child {
  width: 23%;
  text-align: center;
}
@media print, screen and (max-width:768px) {
  .guidebook .child {
    width: 48%;
  }
}
.guidebook .child img:hover {
  opacity: 0.6;
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.guidebook .child a {
  color: #231815;
  text-decoration: none;
}
.guidebook .child a:hover {
  text-decoration: underline;
}
.guidebook .balloon {
  position: relative;
  max-width: 230px;
  margin: 0 auto 20px;
  padding: 10px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 1.3rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.05em;
  background-color: #fff;
  -webkit-filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
}
@media print, screen and (max-width:1200px) {
  .guidebook .balloon {
    font-size: 1.2rem;
  }
}
@media print, screen and (max-width:768px) {
  .guidebook .balloon {
    font-size: 1.1rem;
  }
}
.guidebook .balloon::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: #fff;
}
@media print, screen and (max-width:1026px) {
  .guidebook .img img {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .guidebook .img {
    padding: 0 10%;
  }
}
.guidebook .img:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.guidebook.flex.typeC {
  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;
}
.guidebook.flex.typeC .child {
  width: 18%;
  text-align: center;
}
@media print, screen and (max-width:768px) {
  .guidebook.flex.typeC .child {
    width: 48%;
  }
}
.guidebook.flex.typeC .child:not(:last-child) {
  margin-right: 2%;
}
.guidebook.flex.typeC .child img:hover {
  opacity: 0.6;
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.guidebook.flex.typeC .child a {
  color: #231815;
  text-decoration: none;
}
.guidebook.flex.typeC .child a:hover {
  text-decoration: underline;
}

/*
.imgTitle {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

*/
/***********************************************************/
/* particles.js */
/***********************************************************/
.inner {
  position: relative; /*基準要素、子の基準となる*/
}

/*アニメーション描画用*/
#particles-js {
  /*position:relative;
  z-index:-1;*/
}

canvas {
  position: absolute; /*親のブロックを基準にして相対位置に配置する*/
  /*位置指定*/
  top: 0;
  right: 0;
  z-index: 1; /*重ね順を-1に　※1以上だとほかのコンテンツの上に被さってしまいます*/
  height: 350px !important;
  /*height: auto !important;*/
  /*overflow: hidden;*/
}

#wrapper {
  z-index: 11;
  position: relative;
  width: 100%;
  height: 100%;
}

/*.paWrap{
max-height: 100px;
overflow: hidden;
z-index: 12;
}
*/
/*
#particles-js{ 
  position:fixed;
  z-index:10;
  width: 100%;
  height: 100vh;
  margin: -40px 0 0 0;
}

#wrapper{
  position: relative;
  z-index: 11;
  width:100%;
  height: 100%;
}

*/
.bgWh {
  background: #fff;
  position: relative;
  z-index: 100;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.pickup_block {
  padding: 10px 0 0 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  /*&:before{
    content:"";
    display: block;
    width:22.5%;
    order:1;
  }
  &:after{
    content:"";
    display: block;
    width:22.5%;
  }
  */
}
.pickup_block .child {
  width: 100%;
  background: #fff;
  padding: 0 0 20px;
  -webkit-box-shadow: 0 3px 10px 0px rgba(51, 51, 51, 0.2);
          box-shadow: 0 3px 10px 0px rgba(51, 51, 51, 0.2);
  /*&:not(:last-child) {
  margin-right: 3.33333333%;
  @include g.mq(sp){
  margin-right: 3.33333333%;
  }
  }*/
}
@media print, screen and (max-width:768px) {
  .pickup_block .child {
    width: 80%;
    margin: 0 auto 1.4rem;
    padding: 0;
  }
  .pickup_block .child:nth-child(even) {
    margin-right: 0;
  }
}
.pickup_block .child:hover {
  background: #f8fff8;
}
.pickup_block .child .img {
  width: 100%;
}
.pickup_block .child .img img {
  width: 100%;
}
.pickup_block .child .img:hover img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.pickup_block .child a {
  color: #222;
  text-decoration: none;
}
.pickup_block .child a:hover {
  text-decoration: underline;
}
.pickup_block .child .wrap {
  width: 100%;
  padding: 0 5% 0.5rem 5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.pickup_block .child .day {
  margin: 0 0 0.2rem;
  color: #666;
}
@media print, screen and (max-width:768px) {
  .pickup_block .child .box {
    width: 80%;
  }
}

.btn_nomal.typeP {
  display: block;
  text-align: center;
  margin: 40px auto 60px;
  width: 400px;
  height: 50px;
}
@media print, screen and (max-width:768px) {
  .btn_nomal.typeP {
    width: 80%;
    height: 50px;
    margin: 1.5rem auto;
  }
}
.btn_nomal.typeP p a {
  width: 400px;
  height: 50px;
  font-size: 1.7rem;
}
@media print, screen and (max-width:768px) {
  .btn_nomal.typeP p a {
    width: 100%;
    height: 50px;
  }
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.newsArea {
  /*background:url("../images/top/bg/dot_bg.png");*/
  background: #1ab6ca;
  width: 100%;
  padding: 30px 0;
  /*margin: 0 auto 100px;*/
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 12;
  position: relative;
}
.newsArea._wh {
  background: #fff;
}
@media print, screen and (max-width:1026px) {
  .newsArea {
    height: auto;
    margin: 0 auto;
  }
}
@media print, screen and (max-width:768px) {
  .newsArea {
    padding: 1rem 0 0;
    height: auto;
    margin: 0 auto;
  }
}
.newsArea .wrap {
  max-width: 1200px;
  margin: 30px auto 30px;
}
@media print, screen and (max-width:1200px) {
  .newsArea .wrap {
    max-width: 96%;
    margin: 30px auto 0px;
  }
}
@media print, screen and (max-width:768px) {
  .newsArea .wrap {
    margin: 1.5rem auto 0;
  }
}
.newsArea .block {
  width: 49%;
  background: #fff;
  border: 2px solid #424242;
  border-radius: 10px;
  position: relative;
  padding: 2% 2% 2% 2%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}
@media print, screen and (max-width:768px) {
  .newsArea .block {
    width: 94%;
    margin: 0 auto 2rem;
    padding: 4% 4% 5% 4%;
  }
}
.newsArea .block dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 10px;
  color: #024584;
}
@media print, screen and (max-width:768px) {
  .newsArea .block dl:nth-child(n+6) {
    display: none;
  }
}
.newsArea .block dl dt {
  margin: 0 2% 0 0;
  /*width: 15%; 
  @include g.mq(tab){width: 22%;}
  */
}
@media print, screen and (max-width:768px) {
  .newsArea .block dl dt {
    width: 100%;
  }
}
.newsArea .block dl dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /*width: 84%;
  @include g.mq(tab){width: 76%;}
  @include g.mq(sp){width: 100%;}*/
}
@media print, screen and (max-width:768px) {
  .newsArea .block dl dd {
    width: 100%;
  }
}
.newsArea .block dl dd a {
  color: #024584;
}
.newsArea .block._event .tabList {
  width: 100%;
}
@media print, screen and (max-width:1026px) {
  .newsArea .block._event .tabList {
    margin: 1rem auto 0;
  }
}
.newsArea .block._event .tab_link {
  border: none;
  width: 19%;
  font-size: 1.4rem;
  padding: 15px 0;
}
@media print, screen and (max-width:1026px) {
  .newsArea .block._event .tab_link {
    font-size: 1.1rem;
  }
}
@media print, screen and (max-width:768px) {
  .newsArea .block._event .tab_link {
    font-size: 1rem;
  }
}
.newsArea .block._event .tab_link.active {
  background: rgba(0, 0, 0, 0.5);
}
.newsArea .block._event .tab_link._all {
  background: #efeeed;
}
.newsArea .block._event .tab_link._event {
  background: #6cc2da;
}
.newsArea .block._event .tab_link._course {
  background: #7dc4c3;
}
.newsArea .block._event .tab_link._book {
  background: #f4b0b5;
}
.newsArea .block._event .tab_link._other {
  background: #b2d366;
}
.newsArea .block._event dl dt {
  /*width: 30%;
  @media print, screen and (max-width:1260px) {width: 31%;}
  @include g.mq(pcN){width: 32%;}
  @include g.mq(tab){width: 26%;}
  @include g.mq(sp){width: 100%;}*/
}
.newsArea .block._event dl dt:before {
  margin-right: 1em;
  font-size: 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 80px;
  display: inline-block;
  text-align: center;
  padding: 0.12rem 0.45rem;
  line-height: 1.7rem;
  color: #231815;
}
.newsArea .block._event dl.event dt::before {
  background-color: #6cc2da;
  content: "イベント";
}
.newsArea .block._event dl.course dt::before {
  background-color: #7dc4c3;
  content: "公開講座等";
}
.newsArea .block._event dl.book dt::before {
  background-color: #f4b0b5;
  content: "刊行物";
}
.newsArea .block._event dl.etc dt::before {
  background-color: #b2d366;
  content: "その他";
}
.newsArea .block._event dd {
  /*width: 68%;
  @media print, screen and (max-width:1260px) {width: 68%;}
  @include g.mq(pcN){width: 66%;}
  @include g.mq(tab){width: 72%;}
  @include g.mq(sp){widtåh: 100%;}*/
}
.newsArea .newsTitle {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -6em;
  border: 2px solid #333;
  padding: 0.2em 0;
  width: 12em;
  text-align: center;
  display: inline-block;
  font-size: 140%;
}
.newsArea .block._news .newsTitle {
  background-color: #CBE8EC;
}
.newsArea .block._event .newsTitle {
  background-color: #eacd21;
}
.newsArea .newsBtn {
  text-align: center;
  margin: 20px auto 0;
  /*padding: 30px 0;*/
  /*position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);*/
}
.newsArea .newsBtn:hover {
  opacity: 0.95;
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}

.area {
  padding: 20px 0 0;
}

.newsImgTitle {
  text-align: center;
  margin: 0 auto 1.5rem;
}
.newsImgTitle img {
  width: 100%;
}
@media print, screen and (max-width:1026px) {
  .newsImgTitle {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .newsImgTitle {
    width: 100%;
  }
}

.newsInner {
  min-height: 290px;
}

.coronaBana {
  text-align: center;
  margin: 0 auto 20px;
}
@media print, screen and (max-width:768px) {
  .coronaBana {
    margin: 0 auto 10px;
    width: 94%;
  }
  .coronaBana img {
    width: 100%;
  }
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.faculty {
  z-index: 20;
}
.faculty .faculty__category {
  max-width: 920px;
  margin: 40px auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media print, screen and (max-width:1026px) {
  .faculty .faculty__category {
    margin: 30px auto;
  }
}
@media print, screen and (max-width:768px) {
  .faculty .faculty__category {
    margin: 1.5rem auto 0;
  }
}
.faculty .faculty__category li {
  width: 270px;
  position: relative;
  border: 2px solid #424242;
  line-height: 1.5;
  padding: 10px 0 10px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media print, screen and (max-width:1026px) {
  .faculty .faculty__category li {
    width: 30%;
  }
}
@media print, screen and (max-width:768px) {
  .faculty .faculty__category li {
    width: 32%;
    font-size: 1rem;
    padding: 30px 2% 5px 2%;
  }
}
.faculty .faculty__category li:hover {
  opacity: 0.6;
  　transition: 0.2s;
}
.faculty .faculty__category li:after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  width: 32px;
  height: 23px;
  background-size: contain;
}
@media print, screen and (max-width:1026px) {
  .faculty .faculty__category li:after {
    width: 24px;
    height: 17px;
  }
}
@media print, screen and (max-width:768px) {
  .faculty .faculty__category li:after {
    bottom: -1.8rem;
    width: 19px;
    height: 14px;
  }
}
.faculty .faculty__category li:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 10%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  width: 35px;
  height: 43px;
  background-size: contain;
}
@media print, screen and (max-width:1026px) {
  .faculty .faculty__category li:before {
    width: 25px;
    height: 31px;
  }
}
@media print, screen and (max-width:768px) {
  .faculty .faculty__category li:before {
    top: 7%;
    -webkit-transform: none;
            transform: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 18px;
    height: 23px;
  }
}
.faculty .faculty__category li.sociology {
  background: #b7dbf0;
}
.faculty .faculty__category li.sociology:before {
  background-image: url("../images/top/faculty/icon_blue.png");
}
.faculty .faculty__category li.sociology:after {
  background-image: url("../images/top/faculty/triangle_blue.png");
}
.faculty .faculty__category li.psychology {
  background: #eb93b4;
}
.faculty .faculty__category li.psychology:before {
  background-image: url("../images/top/faculty/icon_red.png");
}
.faculty .faculty__category li.psychology:after {
  background-image: url("../images/top/faculty/triangle_red.png");
}
.faculty .faculty__category li.child {
  background: #f5cf93;
}
.faculty .faculty__category li.child:before {
  background-image: url("../images/top/faculty/icon_yellow.png");
}
.faculty .faculty__category li.child:after {
  background-image: url("../images/top/faculty/triangle_yellow.png");
}

/*学部・コース--------------------------------------*/
.faculty {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto 7em;
  text-align: center;
  font-size: 120%;
}
@media print, screen and (max-width:1026px) {
  .faculty {
    margin: 0 auto 4em;
  }
}

.faculty h2 {
  /* margin-bottom:90px; */
  margin-bottom: 40px;
}

.faculty h3 {
  margin: -30px 0 30px;
}

.faculty h3 img {
  max-width: 260px;
  width: 70%;
}

.faculty li {
  float: left;
  width: 31.5%;
  padding-right: 1%;
  padding-left: 1%;
}

.faculty li .list_container {
  border: 2px solid #333;
  border-radius: 5px;
}

.faculty li p {
  line-height: 1.5;
}

.faculty_link {
  margin: 25px 0;
}

.faculty li.last {
  padding-right: 0;
}

@media all and (max-width: 960px) {
  .faculty li {
    float: none;
    max-width: 400px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3em;
  }
  .faculty h2 {
    /* margin-bottom:4em; */
    margin-bottom: 40px;
  }
}
@media all and (max-width: 640px) {
  .faculty {
    margin: 0 auto 0.5em;
  }
  .faculty h2 {
    /* margin-bottom:3em; */
    margin-bottom: 20px;
  }
  .faculty_link:hover {
    opacity: 0.95;
    -webkit-filter: brightness(110%);
    filter: brightness(110%);
  }
  .faculty_link img {
    width: 40vw;
  }
  .faculty li p {
    font-size: 90%;
  }
  .faculty__lead img {
    width: 80%;
  }
}
.faculty li a {
  color: #231815;
  text-decoration: none;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.sns {
  /*background:#f2f5f9;*/
  background: #1ab6ca;
  padding: 80px 0 0px;
  /* インスタグラム--------------------------------------*/
}
@media print, screen and (max-width:1200px) {
  .sns {
    padding: 40px 0 0px;
  }
}
@media print, screen and (max-width:768px) {
  .sns {
    padding: 2.4rem 0 0;
  }
}
.sns .wrap {
  max-width: 1360px;
  margin: 0 auto;
}
@media print, screen and (max-width:1200px) {
  .sns .wrap {
    max-width: 96%;
  }
}
.sns .l_box {
  width: 67%;
  background: #fff;
  padding: 30px 4% 10px 4%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto 1rem;
}
@media print, screen and (max-width: 1360px) {
  .sns .l_box {
    width: 62%;
  }
}
@media print, screen and (max-width:1200px) {
  .sns .l_box {
    width: 100%;
  }
}
@media print, screen and (max-width:1026px) {
  .sns .l_box {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .sns .l_box {
    width: 100%;
    padding: 10px 4% 10px 4%;
  }
}
.sns .l_box .insta_title {
  margin: 0 auto 20px;
  text-align: center;
}
@media print, screen and (max-width:768px) {
  .sns .l_box .insta_title {
    width: 44%;
  }
  .sns .l_box .insta_title img {
    width: 100%;
  }
}
@media print, screen and (max-width:480px) {
  .sns .l_box .insta_title {
    width: 60%;
  }
  .sns .l_box .insta_title img {
    width: 100%;
  }
}
.sns .l_box .instaBox {
  width: 100%;
}
.sns .l_box .instaBox li {
  width: 23%;
  margin: 0 0 30px;
}
@media print, screen and (max-width:768px) {
  .sns .l_box .instaBox li {
    width: 28%;
    margin: 0 0 1rem;
  }
}
.sns .l_box .instaBox li img {
  width: 100%;
}
.sns .l_box .instaBox::before {
  content: "";
  display: block;
  width: 23%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
@media print, screen and (max-width:768px) {
  .sns .l_box .instaBox::before {
    width: 32%;
  }
}
.sns .l_box .instaBox::after {
  content: "";
  display: block;
  width: 23%;
}
@media print, screen and (max-width:768px) {
  .sns .l_box .instaBox::after {
    width: 32%;
  }
}
.sns ul.instagram__list {
  margin: 0;
  padding: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
}
.sns ul.instagram__list .instagramList__item {
  position: relative;
  margin: 0 0 30px 20px;
  -ms-flex-preferred-size: calc((100% - 60px) / 4);
      flex-basis: calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
}
@media print, screen and (max-width:768px) {
  .sns ul.instagram__list .instagramList__item {
    margin-bottom: 10px;
    margin-left: 10px;
    -ms-flex-preferred-size: calc((100% - 20px) / 3);
        flex-basis: calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
  }
}
.sns ul.instagram__list .instagramList__item:nth-child(4n+1) {
  margin-left: 0;
}
@media print, screen and (max-width:768px) {
  .sns ul.instagram__list .instagramList__item:nth-child(4n+1) {
    margin-left: 10px;
    margin-bottom: 10px;
  }
}
@media print, screen and (max-width:768px) {
  .sns ul.instagram__list .instagramList__item:nth-child(3n+1) {
    margin-left: 0;
  }
}
.sns ul.instagram__list .instagramList__item:nth-child(9) {
  display: none;
}
@media print, screen and (max-width:768px) {
  .sns ul.instagram__list .instagramList__item:nth-child(9) {
    display: block;
  }
}
.sns ul.instagram__list .instagramList__inner {
  padding-top: 133.3333333333%;
}
.sns ul.instagram__list img {
  vertical-align: bottom;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.sns ul.instagram__list video {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  height: 100%;
}
.sns ul.instagram__list::before {
  content: "";
  display: block;
  width: 23%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
@media print, screen and (max-width:768px) {
  .sns ul.instagram__list::before {
    width: 32%;
  }
}
.sns ul.instagram__list::after {
  content: "";
  display: block;
  width: 23%;
}
@media print, screen and (max-width:768px) {
  .sns ul.instagram__list::after {
    width: 32%;
  }
}
.sns .instagramList__link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sns .instagramList__link::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.sns .instagramList__link.-album::after {
  content: "";
  background-image: url("../exam/images/home/instagram/icon/album.svg");
}
.sns .instagramList__link.-video::after {
  content: "";
  background-image: url("../exam/images/home/instagram/icon/video.svg");
}
.sns .r_box {
  width: 29%;
  text-align: center;
  margin: auto;
}
@media print, screen and (max-width: 1360px) {
  .sns .r_box {
    width: 34%;
  }
}
@media print, screen and (max-width:1200px) {
  .sns .r_box {
    width: 100%;
  }
}
@media print, screen and (max-width:1026px) {
  .sns .r_box {
    width: 100%;
  }
}
@media print, screen and (max-width:768px) {
  .sns .r_box {
    width: 100%;
  }
}
.sns .bana {
  width: 94%;
  text-align: center;
  margin: 0 auto 20px;
}
.sns .bana img {
  width: 100%;
}
@media print, screen and (max-width:1200px) {
  .sns .bana {
    width: 36%;
    margin: 20px auto 20px;
  }
}
@media print, screen and (max-width:768px) {
  .sns .bana {
    width: 60%;
    margin: 20px auto 20px;
  }
}
@media print, screen and (max-width:768px) {
  .sns .fb {
    width: 90%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    display: block;
  }
}
.sns .sns_2box {
  max-width: 190px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  margin: 50px auto;
  text-align: center;
}
@media print, screen and (max-width:1026px) {
  .sns .sns_2box {
    margin: 40px auto;
  }
}
@media print, screen and (max-width:768px) {
  .sns .sns_2box {
    max-width: 120px;
    margin: 2rem auto;
  }
}
.sns .sns_2box p {
  width: 45%;
}
.sns .sns_2box p img {
  width: 100%;
}
.sns .sns_2box p:hover {
  opacity: 0.7;
}
.sns .sns_2box_2 {
  max-width: 640px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  margin: 50px auto;
  text-align: center;
}
@media print, screen and (max-width:1026px) {
  .sns .sns_2box_2 {
    margin: 40px auto;
  }
}
@media print, screen and (max-width:768px) {
  .sns .sns_2box_2 {
    max-width: 100%;
    margin: 2rem auto;
  }
}
.sns .sns_2box_2 .line_bana2 {
  width: 70%;
}
.sns .sns_2box_2 .icon2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 25%;
}
.sns .sns_2box_2 .icon2 p {
  width: 45%;
}
.sns .sns_2box_2 p img {
  width: 100%;
}
.sns .sns_2box_2 p:hover {
  opacity: 0.7;
}
.sns .sns_2box_3 {
  max-width: 940px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  margin: 50px auto;
  text-align: center;
}
@media print, screen and (max-width:1026px) {
  .sns .sns_2box_3 {
    margin: 40px auto;
  }
}
@media print, screen and (max-width:768px) {
  .sns .sns_2box_3 {
    max-width: 100%;
    margin: 2rem auto;
  }
}
.sns .sns_2box_3 .sigetu {
  width: 36%;
}
.sns .sns_2box_3 .sigetu img {
  width: 100%;
}
.sns .sns_2box_3 .line_bana2 {
  width: 40%;
}
.sns .sns_2box_3 .icon2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 18%;
}
.sns .sns_2box_3 .icon2 p {
  width: 45%;
}
.sns .sns_2box_3 p img {
  width: 100%;
}
.sns .sns_2box_3 p:hover {
  opacity: 0.7;
}
.sns .sns_2box_4 {
  max-width: 940px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  margin: 50px auto;
  text-align: center;
}
@media print, screen and (max-width:1026px) {
  .sns .sns_2box_4 {
    margin: 40px auto;
  }
}
@media print, screen and (max-width:768px) {
  .sns .sns_2box_4 {
    max-width: 100%;
    margin: 2rem auto;
  }
}
.sns .sns_2box_4 .sigetu {
  width: 84%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.sns .sns_2box_4 .sigetu .bana {
  width: 32%;
}
.sns .sns_2box_4 .sigetu img {
  width: 100%;
}
@media print, screen and (max-width:768px) {
  .sns .sns_2box_4 .sigetu {
    width: 100%;
    margin: 0 auto;
  }
}
.sns .sns_2box_4 .icon2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 14%;
}
@media print, screen and (max-width:768px) {
  .sns .sns_2box_4 .icon2 {
    width: 20%;
    margin: 0 auto;
  }
}
.sns .sns_2box_4 .icon2 p {
  width: 40%;
}
.sns .sns_2box_4 p img {
  width: 100%;
}
.sns .sns_2box_4 p:hover {
  opacity: 0.7;
}

.sns_loopText {
  width: 100%;
  overflow: hidden;
}
.sns_loopText img {
  width: 100%;
}
@media print, screen and (max-width:768px) {
  .sns_loopText {
    /*img[src$=".svg"]{width: 100%; height: auto; height: 65px;}*/
  }
  .sns_loopText img {
    width: auto;
    height: 65px;
  }
}

.sns_loopText_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.loopBox {
  -webkit-animation: an_loopText 70s linear infinite;
  animation: an_loopText 70s linear infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  /*  padding-right: 24vw;*/
  min-width: 140vw;
  display: block;
  /*  @include g.mq(sp){ min-width: 100vw;}*/
}
@media print, screen and (min-width:1201px) {
  .loopBox {
    min-width: 180vw;
  }
}
@media print, screen and (max-width:768px) {
  .loopBox {
    -webkit-animation: an_loopText 30s linear infinite;
    animation: an_loopText 30s linear infinite;
    min-width: 260vw;
  }
}
@media print, screen and (max-width:480px) {
  .loopBox {
    -webkit-animation: an_loopText 40s linear infinite;
    animation: an_loopText 40s linear infinite;
    min-width: 300vw;
  }
}

@-webkit-keyframes an_loopText {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************

動画

****************************************************************************************************/
.movieHomeBlock {
  top: 86px; /* 共通ヘッダー関連で追加 */
}

.mainVisual {
  top: 86px;
}

/****************************************************************************************************

グロナビ

****************************************************************************************************/
.global_navi {
  top: 121px;
}

/****************************************************************************************************

サイドナビ

****************************************************************************************************/
.side_navi {
  top: 121px;
}

@media all and (max-width: 1200px) {
  .side_navi {
    top: 201px;
  }
}
/****************************************************************************************************

バナー

****************************************************************************************************/
/*.slideBannerContainer{
    top: calc( 880px + 86px );
}
@media all and (max-width: 1500px) {
.slideBannerContainer.type2{
    top: calc( 59vw + 86px );
}
}
@media all and (max-width: 1480px) {
.slideBannerContainer.type2{
    top: calc( 59vw + 86px );
}
}
@media all and (max-width: 700px) {
.slideBannerContainer.type2{
    top:calc(78vw + 80px + 50px);
}
}
@media all and (max-width: 400px) {
.slideBannerContainer.type2{
    top:calc(70vw + 80px + 30px);
}
}*/
/****************************************************************************************************


****************************************************************************************************/
/*@media all and (max-width: 700px) {
.main_margin.type2{
}
}*/
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/*========================================================= */
/* オプション用 */
/*========================================================= */
.invisible {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.invisible01 {
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}

.poyo {
  -webkit-animation: poyo 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
          animation: poyo 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@-webkit-keyframes poyo {
  0% {
    -webkit-transform: translateX(140px);
            transform: translateX(140px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  65% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20%, 100% {
    opacity: 1;
  }
}

@keyframes poyo {
  0% {
    -webkit-transform: translateX(140px);
            transform: translateX(140px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  65% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20%, 100% {
    opacity: 1;
  }
}
.poyo2 {
  -webkit-animation: poyo2 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
          animation: poyo2 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@-webkit-keyframes poyo2 {
  0% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  65% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20%, 100% {
    opacity: 1;
  }
}

@keyframes poyo2 {
  0% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  65% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20%, 100% {
    opacity: 1;
  }
}
.delay-time01 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.delay-time02 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.delay-time03 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.delay-time04 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.delay-time05 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.delay-time06 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.delay-time07 {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.delay-time08 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.delay-time09 {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.delay-time1 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.delay-time105 {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.delay-time2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.delay-time3 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.titleTxt {
  font-size: 3rem;
  margin: 0 auto 2.4rem;
  text-align: center;
}
@media print, screen and (max-width:1200px) {
  .titleTxt {
    font-size: 2.8rem;
  }
}
@media print, screen and (max-width:768px) {
  .titleTxt {
    font-size: 2rem;
    margin: 0 auto 1.8rem;
  }
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.all-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1000;
}

.logoImg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
#f_bana {
  z-index: 800;
  position: relative;
  /*nav_Bana---------------------*/
  /*@media print, screen and (min-width:1200px) {
  .nav_Bana{bottom: 24%;}
  }
  @media print, screen and (min-width:1060px) {
  .nav_Bana{top: 85%;}
  }
  */
  /*@media print, screen and (max-width:980px) {
  .nav_Bana{top: 75%;}
  }*/
}
#f_bana .nav_Bana {
  position: fixed;
  right: 0;
  top: 602px;
  -webkit-transform: translate(320px, 0%);
  transform: translate(320px, 0%);
  z-index: 700;
}
#f_bana .nav_Bana.anime {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#f_bana .nav_Bana.open {
  -webkit-transform: translate(0, 0%);
  transform: translate(0, 0%);
}
@media screen and (max-height: 770px) {
  #f_bana .nav_Bana {
    -webkit-transform: translate(320px, 0);
    transform: translate(320px, 0);
  }
  #f_bana .nav_Bana.open {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
#f_bana .nav_Bana .nav_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#f_bana .nav_Bana .nav_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#f_bana .nav_Bana .nav_inner dd {
  width: 320px;
}
@media print, screen and (max-width: 1200px) {
  #f_bana .nav_Bana {
    top: 830px;
  }
}
@media print, screen and (max-width: 1000px) {
  #f_bana .nav_Bana {
    top: 25%;
  }
}
@media screen and (max-height: 650px) {
  #f_bana .nav_Bana {
    top: auto;
    bottom: 0;
  }
}

/*========================================*/
@media print, screen and (max-width:768px) {
  .f_sp {
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 100;
    margin-bottom: 0 !important;
    /*cursor:pointer;*/
  }
  .f_sp img {
    width: 100%;
  }
}
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/*infoエリアをはじめは非表示*/
#info {
  display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container {
  max-width: 860px;
  text-align: center !important;
  margin: 0 auto;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #666;
}

.modaal-container {
  text-align: center;
  width: 100%;
}

.modaal-container img {
  width: 100%;
}

@media (max-width: 735px) {
  .modaal-content-container {
    padding: 10px !important;
  }
  .modaal-container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.modaal-container {
  max-width: 860px !important;
  max-height: 500px !important;
}
@media print, screen and (max-width: 900px) {
  .modaal-container {
    max-width: 800px !important;
    max-height: 430px !important;
  }
}
@media print, screen and (max-width: 826px) {
  .modaal-container {
    max-width: 740px !important;
    max-height: 400px !important;
  }
}
@media print, screen and (max-width:768px) {
  .modaal-container {
    max-height: 100vh !important;
  }
}

.modaal-overlay {
  z-index: 2000 !important;
}

.slideImg {
  width: 810px;
  height: 400px;
  overflow: hidden;
  position: relative;
  /* @include g.mq(sp){width: 100%; height:55vh;}*/
  /*@media print, screen and (max-width:768px) {width: 100%; height:70vh;}
   @media print, screen and (max-width:600px) {width: 100%; height:68vh;}
   @media print, screen and (max-width:570px) {width: 100%; height:65vh;}
  @media print, screen and (max-width:540px) {width: 100%; height:62vh;}
    @media print, screen and (max-width:520px) {width: 100%; height:60vh;}
  @media print, screen and (max-width:500px) {width: 100%; height:72vh;}
   @media print, screen and (max-width:480px) {width: 100%; height:68vh;}
   @media print, screen and (max-width:470px) {width: 100%; height:67vh;}
   @media print, screen and (max-width:460px) {width: 100%; height:66vh;}
   @media print, screen and (max-width:450px) {width: 100%; height:63vh;}
   @media print, screen and (max-width:440px) {width: 100%; height:62vh;}
   @media print, screen and (max-width:430px) {width: 100%; height:61vh;}
   @media print, screen and (max-width:420px) {width: 100%; height:60vh;}
   @media print, screen and (max-width:415px) {width: 100%; height:57vh;}
   @media print, screen and (max-width:400px) {width: 100%; height:57vh;}
   @media print, screen and (max-width:386px) {width: 100%; height:56vh;}
    @media print, screen and (max-width:370px) {width: 100%; height:55vh;}*/
}
@media print, screen and (max-width: 768px) {
  .slideImg {
    width: 100%;
    height: 37vh;
  }
}
@media print, screen and (max-width: 680px) {
  .slideImg {
    width: 100%;
    height: 35vh;
  }
}
@media print, screen and (max-width: 670px) {
  .slideImg {
    width: 100%;
    height: 34.5vh;
  }
}
@media print, screen and (max-width: 660px) {
  .slideImg {
    width: 100%;
    height: 34vh;
  }
}
@media print, screen and (max-width: 650px) {
  .slideImg {
    width: 100%;
    height: 33vh;
  }
}
@media print, screen and (max-width: 630px) {
  .slideImg {
    width: 100%;
    height: 32vh;
  }
}
@media print, screen and (max-width: 616px) {
  .slideImg {
    width: 100%;
    height: 31vh;
  }
}
@media print, screen and (max-width: 600px) {
  .slideImg {
    width: 100%;
    height: 30vh;
  }
}
@media print, screen and (max-width: 586px) {
  .slideImg {
    width: 100%;
    height: 29vh;
  }
}
@media print, screen and (max-width: 560px) {
  .slideImg {
    width: 100%;
    height: 27vh;
  }
}
@media print, screen and (max-width: 540px) {
  .slideImg {
    width: 100%;
    height: 27vh;
  }
}
@media print, screen and (max-width: 530px) {
  .slideImg {
    width: 100%;
    height: 26vh;
  }
}
@media print, screen and (max-width: 516px) {
  .slideImg {
    width: 100%;
    height: 25vh;
  }
}
@media print, screen and (max-width: 500px) {
  .slideImg {
    width: 100%;
    height: 24vh;
  }
}
@media print, screen and (max-width: 480px) {
  .slideImg {
    width: 100%;
    height: 23vh;
  }
}
@media print, screen and (max-width: 466px) {
  .slideImg {
    width: 100%;
    height: 22.5vh;
  }
}
@media print, screen and (max-width: 460px) {
  .slideImg {
    width: 100%;
    height: 22vh;
  }
}
@media print, screen and (max-width: 446px) {
  .slideImg {
    width: 100%;
    height: 21.5vh;
  }
}
@media print, screen and (max-width: 440px) {
  .slideImg {
    width: 100%;
    height: 21vh;
  }
}
@media print, screen and (max-width: 430px) {
  .slideImg {
    width: 100%;
    height: 20.5vh;
  }
}
@media print, screen and (max-width: 420px) {
  .slideImg {
    width: 100%;
    height: 20vh;
  }
}
@media print, screen and (max-width: 416px) {
  .slideImg {
    width: 100%;
    height: 19.5vh;
  }
}
@media print, screen and (max-width: 406px) {
  .slideImg {
    width: 100%;
    height: 19vh;
  }
}
@media print, screen and (max-width: 400px) {
  .slideImg {
    width: 100%;
    height: 18.5vh;
  }
}
@media print, screen and (max-width: 386px) {
  .slideImg {
    width: 100%;
    height: 18vh;
  }
}
@media print, screen and (max-width: 380px) {
  .slideImg {
    width: 100%;
    height: 17.5vh;
  }
}
@media print, screen and (max-width: 370px) {
  .slideImg {
    width: 100%;
    height: 17vh;
  }
}
@media print, screen and (max-width: 360px) {
  .slideImg {
    width: 100%;
    height: 16.5vh;
  }
}
@media print, screen and (max-width: 350px) {
  .slideImg {
    width: 100%;
    height: 16vh;
  }
}
@media print, screen and (max-width: 340px) {
  .slideImg {
    width: 100%;
    height: 15.5vh;
  }
}
@media print, screen and (max-width: 330px) {
  .slideImg {
    width: 100%;
    height: 15vh;
  }
}
@media print, screen and (max-width: 320px) {
  .slideImg {
    width: 100%;
    height: 14.5vh;
  }
}

.slider_fade > div {
  width: 800px;
  height: 100vh;
  position: relative;
}
.slider_fade > div img {
  width: 100%;
}
@media print, screen and (max-width: 900px) {
  .slider_fade > div {
    width: 740px;
  }
}
@media print, screen and (max-width: 826px) {
  .slider_fade > div {
    width: 680px;
  }
}
@media print, screen and (max-width:768px) {
  .slider_fade > div {
    width: 100%;
  }
}

.slider_fade > div {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  opacity: 0;
  -webkit-animation: anime_slider_fade 30s 0s infinite;
          animation: anime_slider_fade 30s 0s infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

.slider_fade > div:nth-of-type(2) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.slider_fade > div:nth-of-type(3) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

.slider_fade > div:nth-of-type(4) {
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
}

.slider_fade > div:nth-of-type(5) {
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}

.slider_fade > div:nth-of-type(6) {
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
}

.slider_fade > div:nth-of-type(7) {
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
}

.slider_fade > div:nth-of-type(8) {
  -webkit-animation-delay: 21s;
          animation-delay: 21s;
}

.slider_fade > div:nth-of-type(9) {
  -webkit-animation-delay: 24s;
          animation-delay: 24s;
}

.slider_fade > div:nth-of-type(10) {
  -webkit-animation-delay: 27s;
          animation-delay: 27s;
}

@-webkit-keyframes anime_slider_fade {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes anime_slider_fade {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*
.wrap{  padding: 16px;}

.swiper_mo{
width: 100%;
height: auto;

}

@keyframes zoomUpAnimation {
0% {
    transform: scale(1);
}
100% {
    transform: scale(1.15);
}
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
animation: zoomUpAnimation 12s linear 0s 1 normal both;
}
.swiper-slide img {
width: 100%;
display: block;
}
*/
/****************************************************************************************************
2023/06/08追加
最新のPICK UP
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.p-latestPickup {
  margin: 40px auto 0;
  padding: 0 20px;
  max-width: 1240px;
}
/****************************************************************************************************
****************************************************************************************************/
.p-latestPickup__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  line-height: 1.5;
}
.p-latestPickup__list li {
  margin-left: 20px;
  margin-bottom: 20px;
  -ms-flex-preferred-size: calc((100% - 100px) / 6);
      flex-basis: calc((100% - 100px) / 6);
  max-width: calc((100% - 100px) / 6);
}
@media print, screen and (max-width:1026px) {
  .p-latestPickup__list li {
    -ms-flex-preferred-size: calc((100% - 40px) / 3);
        flex-basis: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
  }
}
.p-latestPickup__list li:first-child {
  margin-left: 0;
}
@media print, screen and (max-width:1026px) {
  .p-latestPickup__list li:nth-child(4) {
    margin-left: 0;
  }
}
.p-latestPickup__list a {
  color: #222;
  text-decoration: none;
}
.p-latestPickup__list a:hover {
  text-decoration: underline;
}

/****************************************************************************************************
****************************************************************************************************/
.p-latestPickup__img {
  margin-bottom: 5px;
}
.p-latestPickup__img img {
  width: 100%;
}

/****************************************************************************************************
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.p-latestPickup__day {
  margin-bottom: 3px;
  color: #666;
}
@media print, screen and (max-width:768px) {
  .p-latestPickup__day {
    font-size: 1rem;
  }
}

/****************************************************************************************************
****************************************************************************************************/
.p-latestPickup__title {
  margin-bottom: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media print, screen and (max-width:768px) {
  .p-latestPickup__title {
    font-size: 1.2rem;
  }
}

/****************************************************************************************************
****************************************************************************************************/
.p-latestPickup__category {
  margin-bottom: 0;
  font-size: 1.1rem;
}
@media print, screen and (max-width:768px) {
  .p-latestPickup__category {
    font-size: 1rem;
  }
}

/****************************************************************************************************
****************************************************************************************************/

/****************************************************************************************************
2023/06/08
各タブのPICK UP
入試関連以外
****************************************************************************************************/
/****************************************************************************************************
****************************************************************************************************/
.p-areaPickup {
  /**************************************************
  スライダー本体
  **************************************************/
  /**************************************************
  スライド要素
  **************************************************/
}
.p-areaPickup .pickup__swiper {
  padding-bottom: 10px;
  /**************************************************
  スライド1枚
  **************************************************/
  /**************************************************
  スライド2枚
  **************************************************/
  /**************************************************
  スライド3枚
  **************************************************/
  /**************************************************
  スライド4枚
  **************************************************/
}
.p-areaPickup__block.-slideNum1 .pickup__swiper .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-areaPickup__block.-slideNum1 .pickup__swiper .swiper-button-prev {
  display: none;
}
.p-areaPickup__block.-slideNum1 .pickup__swiper .swiper-button-next {
  display: none;
}

.p-areaPickup__block.-slideNum2 .pickup__swiper {
  /*
  600px以上のときはスライドを解除
  スライド2枚を並べる

  左右のボタンは非表示
  */
}
@media print, screen and (min-width: 600px) {
  .p-areaPickup__block.-slideNum2 .pickup__swiper .swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .p-areaPickup__block.-slideNum2 .pickup__swiper .swiper-wrapper .swiper-slide {
    margin-right: 3.33%;
    -ms-flex-preferred-size: 26.6009852217%;
        flex-basis: 26.6009852217%;
    max-width: 26.6009852217%;
  }
  .p-areaPickup__block.-slideNum2 .pickup__swiper .swiper-wrapper .swiper-slide:last-child {
    margin-right: 0;
  }
  .p-areaPickup__block.-slideNum2 .pickup__swiper .swiper-button-prev {
    display: none;
  }
  .p-areaPickup__block.-slideNum2 .pickup__swiper .swiper-button-next {
    display: none;
  }
}

.p-areaPickup__block.-slideNum3 .pickup__swiper {
  /*
  1025px以上のときはスライドを解除
  スライド3枚を並べる

  左右のボタンは非表示
  */
}
@media print, screen and (min-width: 1025px) {
  .p-areaPickup__block.-slideNum3 .pickup__swiper .swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .p-areaPickup__block.-slideNum3 .pickup__swiper .swiper-wrapper .swiper-slide {
    margin-right: 3.33%;
    -ms-flex-preferred-size: 26.6009852217%;
        flex-basis: 26.6009852217%;
    max-width: 26.6009852217%;
  }
  .p-areaPickup__block.-slideNum3 .pickup__swiper .swiper-wrapper .swiper-slide:last-child {
    margin-right: 0;
  }
  .p-areaPickup__block.-slideNum3 .pickup__swiper .swiper-button-prev {
    display: none;
  }
  .p-areaPickup__block.-slideNum3 .pickup__swiper .swiper-button-next {
    display: none;
  }
}

.p-areaPickup__block.-slideNum4 .pickup__swiper {
  /*
  1360px以上のときはスライドを解除
  スライド4枚を並べる

  左右のボタンは非表示
  */
}
@media print, screen and (min-width: 1360px) {
  .p-areaPickup__block.-slideNum4 .pickup__swiper .l-inner {
    width: 100%;
  }
  .p-areaPickup__block.-slideNum4 .pickup__swiper .swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .p-areaPickup__block.-slideNum4 .pickup__swiper .swiper-wrapper .swiper-slide {
    margin-right: 3.33%;
    -ms-flex-preferred-size: 22.5%;
        flex-basis: 22.5%;
    max-width: 22.5%;
  }
  .p-areaPickup__block.-slideNum4 .pickup__swiper .swiper-wrapper .swiper-slide:last-child {
    margin-right: 0;
  }
  .p-areaPickup__block.-slideNum4 .pickup__swiper .swiper-button-prev {
    display: none;
  }
  .p-areaPickup__block.-slideNum4 .pickup__swiper .swiper-button-next {
    display: none;
  }
}

@media print, screen and (min-width: 1360px) {
  .p-areaPickup__block.-slideNum4 .l-inner {
    width: 100%;
  }
  .p-areaPickup__block.-slideNum4 .l-inner ._wrap {
    width: 100%;
  }
}

.p-areaPickup .pickup_block {
  position: relative;
}
.p-areaPickup .pickup_block .child {
  width: 100%;
}
.p-areaPickup__block.-slideNum1 .child {
  width: 26.6009852217%;
}
@media print, screen and (max-width:768px) {
  .p-areaPickup__block.-slideNum1 .child {
    width: 80%;
    margin: 0 auto 1.4rem;
    padding: 0;
  }
}