@charset "UTF-8";
/*hoverBox*/
.hoverBox .flex-one {
  position: relative;
  -webkit-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
  background: #FFF;
}

.hoverBox .flex-one a.boxlink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: #FFF;
  overflow: hiddden;
  opacity: 0;
}

.hoverBox .flex-one.noshadow:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.hoverBox .flex-one .text {
  padding: 1rem;
}

/*innerImage*/
.innerImage {
  position: relative;
  overflow: hidden;
}

.innerImage figure img {
  overflow: hidden;
  -webkit-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.innerImage figure img {
  width: 100%;
  -webkit-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

.innerImage:hover img {
  opacity: 1;
}

.innerImage article {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(9, 49, 95, 0.7);
  margin: 0;
  padding: 0;
  -webkit-transition: all linear .3s;
  transition: all linear .3s;
}

.innerImage article:after {
  position: absolute;
  bottom: 20px;
  right: 20px;
  content: '→';
  display: block;
}

.innerImage:hover article {
  background: rgba(9, 49, 95, 0.3);
}

.innerImage article h3 {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 0 20px;
  color: #FFF;
  border: none;
  font-size: 1em;
  margin: 0;
}

.innerImage a.boxlink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: #FFF;
  overflow: hiddden;
  text-indent: -100%;
}

/*------------------------------------*\
  印刷用
\*------------------------------------*/
@media print {
  a[href]:after {
    content: "" !important;
  }
  abbr[title]:after {
    content: "" !important;
  }
}

/*------------------------------------*\
  データ属性絞り込み
\*------------------------------------*/
.category-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  margin: 40px auto;
}

.category-btn.keyword {
  background: #f5f5f5;
  padding: 15px;
}

.category-btn.keyword li a {
  font-size: .8em;
}

.category-btn li a {
  display: inline-block;
  padding: 10px 30px;
}

.category-btn.keyword li a {
  font-size: .8em;
  border: none;
  background: #FFF;
  color: #09315f;
}

.category-btn li a.is-select {
  border-bottom: 2px solid #09315f;
}

.category-btn.keyword li a.is-select {
  color: #FFF;
}

.category-list .flex-one {
  position: relative;
}

.category-list .flex-one a.boxlink {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  text-indent: 100%;
  /*テキスト非表示*/
  white-space: nowrap;
  /*テキスト非表示*/
  overflow: hidden;
  /*テキスト非表示*/
  z-index: 10;
}

.category-list:before {
  content: "";
  display: block;
  width: 24%;
  height: 0;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.category-list:after {
  content: "";
  display: block;
  width: 24%;
  height: 0;
}

.is-animate {
  opacity: 1;
  -webkit-animation: .6s zoom-in;
          animation: .6s zoom-in;
}

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0.3;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0.3;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@media (max-width: 39em) {
  .category-list .innerImage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .category-list .innerImage figure {
    width: 48%;
  }
  .category-list .innerImage .text {
    width: 48%;
  }
  .category-btn li {
    display: inline-block;
  }
  .category-btn.keyword li a {
    display: block;
    margin: 5px 0;
  }
}

/*------------------------------------*\
  ボックスアニメーション
\*------------------------------------*/
.hoverBox .flex-one a.boxlink {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  text-indent: 100%;
  /*テキスト非表示*/
  white-space: nowrap;
  /*テキスト非表示*/
  overflow: hidden;
  /*テキスト非表示*/
  z-index: 10;
}

.hoverBox .hoverGrid a.boxlink {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  text-indent: 100%;
  /*テキスト非表示*/
  white-space: nowrap;
  /*テキスト非表示*/
  overflow: hidden;
  /*テキスト非表示*/
  z-index: 10;
}

/*Image animation*/
.hoverGrid {
  overflow: hidden;
  position: relative;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
}

.hoverGrid.is-visible {
  -webkit-animation: fadeInUp 0.6s 0s forwards;
          animation: fadeInUp 0.6s 0s forwards;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

/*上から*/
.hoverGrid:before {
  position: absolute;
  z-index: 1;
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.hoverGrid.is-visible:before {
  -webkit-animation: fromTop .4s 2s forwards;
          animation: fromTop .4s 2s forwards;
}

@-webkit-keyframes fromTop {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(101%);
    transform: translateY(101%);
  }
}

@keyframes fromTop {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(101%);
    transform: translateY(101%);
  }
}

/*下から*/
.hoverGrid.bottomUp:before {
  position: absolute;
  z-index: 1;
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.hoverGrid.bottomUp.is-visible:before {
  -webkit-animation: fromBottom .4s 2s forwards;
          animation: fromBottom .4s 2s forwards;
}

@-webkit-keyframes fromBottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-101%);
    transform: translateY(-101%);
  }
}

@keyframes fromBottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-101%);
    transform: translateY(-101%);
  }
}

/*左から*/
.hoverGrid.leftToRight:before {
  position: absolute;
  z-index: 1;
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.hoverGrid.leftToRight.is-visible:before {
  -webkit-animation: fromLeftToRight .4s 2s forwards;
          animation: fromLeftToRight .4s 2s forwards;
}

@-webkit-keyframes fromLeftToRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

@keyframes fromLeftToRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

/*右から*/
.hoverGrid.rightToLeft:before {
  position: absolute;
  z-index: 1;
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.hoverGrid.rightToLeft.is-visible:before {
  -webkit-animation: fromLeftToRight .4s 2s forwards;
          animation: fromLeftToRight .4s 2s forwards;
}

@-webkit-keyframes fromRightToLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-101%);
    transform: translateX(-101%);
  }
}

@keyframes fromRightToLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-101%);
    transform: translateX(-101%);
  }
}

/*テキストアニメーション*/
.is-left-slide {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}

.is-left-slide.is-visible {
  -webkit-animation: fadeIn .4s 1s forwards;
          animation: fadeIn .4s 1s forwards;
}

.is-right-slide {
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}

.is-right-slide.is-visible {
  -webkit-animation: fadeIn .4s 1s forwards;
          animation: fadeIn .4s 1s forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

.is-down-slide {
  opacity: 0;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}

.is-down-slide.is-visible {
  -webkit-animation: fadeInY .4s 1s forwards;
          animation: fadeInY .4s 1s forwards;
}

@-webkit-keyframes fadeInY {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@keyframes fadeInY {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
/*# sourceMappingURL=anim.css.map */