/* -----------------
html
-------------------- */

html,
body {
  background-color: #ebf5df;
  color: #333;
  width: 100%;
  height: 100%;
}
/* -----------------
エリア
-------------------- */
.container {
  margin-left:auto;
  margin-right:auto;
  padding-left:.938rem;
  padding-right:.938rem;
}
.container:after {
  content:"";
  display:table;
  clear:both;
}
@media (min-width: 544px){.container{max-width:576px}}
@media (min-width: 768px){.container{max-width:720px}}
@media (min-width: 992px){.container{max-width:940px}}
@media (min-width: 1200px){.container{max-width:1140px}}
.container-fluid{
  margin-left:auto;
  margin-right:auto;
  padding-left:.938rem;
  padding-right:.938rem;
}
.container-fluid::after{
  content:"";
  display:table;
  clear:both;
}



@-webkit-keyframes jumbotronBgAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes jumbotronBgAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes jumbotronBgAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

.jumbotron {
  border-radius: 0;
  margin-bottom: 0;

  background-image: linear-gradient(98deg, #328fc0, #f078b4, #e9c541);
  background-size: 600% 600%;

  -webkit-animation: jumbotronBgAnimation 21s ease infinite;
  -moz-animation: jumbotronBgAnimation 21s ease infinite;
  animation: jumbotronBgAnimation 21s ease infinite;
  font-family: 'Lato', sans-serif;
}
@media (min-width: 768px) and (min-height: 37.5em){
  .center-vertically{
    display:table;
    width:100%;
    height:100%;
    padding:0;
  }
  .center-vertically>div{
    display:table-cell;
    vertical-align:middle;
  }
}



/* -----------------
motion
-------------------- */
.motion {
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -ms-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;

}