html {
    height: 100%;
}

body{
  font-size: 0.9em;
  height: 100%;
  margin: 0;
  animation: fadein 3s ease 0s 1 normal;
  -webkit-animation: fadein 2s ease 0s 1 normal;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

@keyframes fadein{
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadein{
0% {opacity: 0}
100% {opacity: 1}
}

*{
 border: 0;
 margin: 0;
 padding: 0;
}

header{
  position: relative;
  height: 100%;
  background: linear-gradient(-45deg, #091f66, #67a99b);
  background-size: 300% 300%;
  animation: AnimationName 8s ease infinite;
}

@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.pc { display: block !important; }
.sp { display: none !important; }


.kira ul{
  position:absolute;
  top:33%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}

@media only screen and (max-width: 500px){
    .pc { display: none !important; }
    .sp { display: block !important; }
    .kira ul{ top:25%; }
}

.kira ul li{
  list-style:none;
  width:40px;
  height:40px;
  border-radius:50%;
  animation:grow 1.6s ease-in-out infinite;
}
  @keyframes grow
  {
    0% , 50% , 100%
    {
      transform:scale(0.2);
    }
    20%{
       transform:scale(0.4);

    }
  }

.kira ul li:nth-child(1){
  animation-delay:-1.4s;
  background:#fff;
  box-shadow:0 0 50px #fff;
  
}
.kira ul li:nth-child(2){
  animation-delay:-1.2s;
  background:#fff;
  box-shadow:0 0 50px #fff;
  
}
.kira ul li:nth-child(3){
  animation-delay:-1s;
  background:#fff;
  box-shadow:0 0 50px #1e90ff;
  
}
ul li:nth-child(4){
  animation-delay:-0.8s;
  background:#fff;
  box-shadow:0 0 50px #fff;
  
}
.kira ul li:nth-child(5){
  animation-delay:-0.6s;
  background:#fff;
  box-shadow:0 0 50px #fff;
  
}

.contents{
  background-color: #fff;
  padding: 5%;
}
.contents_m{
  background: #091f66;
  padding: 5%;
}

.top_tx{
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.top_tx h1{
    padding-bottom: 2em;
}
.top_tx ul{
    margin-top: 0.8em;
    margin-bottom: 1em;
}
.top_tx li{
  font-size: 1.5em;
  /*display: inline-block;*/
  list-style: none;
  margin-bottom: 0.1em;
}

.top_tx li a{
  text-decoration: none;
  color: #fff;
  transition: .3s;
}

.top_tx li a:hover{
  color: #c9b068;
}


h2{
    text-align: center;
    font-size: 2em;
    padding: 1em;
    color: #091f66;
}

.contents_m h2{
    color: #c9b068;
}

h3{
    color: #67a99b;
    padding: 0.5em;
}

.chuo{
    text-align: center;
}

.btn-gradient {
  display: inline-block;
  padding: 2.5em 3em;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 1.5em;
  background-image: linear-gradient(45deg, #091f66 0%, #67a99b 100%);
  transition: .4s;
  margin-bottom:3em;
}

.btn-gradient:hover {
  background-image: linear-gradient(45deg, #091f66 50%, #67a99b 100%);
}

.member{
    display: inline-block;
    overflow: hidden;
    background-color: #fff;
    width: 300px;
    height: 150px;
    max-width: 100%;
    border-radius: 10px;
    margin: 10px;
}

.member p{
    color: #fff;
    background-color: #67a99b;
    text-align: left;
    height: 25px;
    padding: 0.5em;
    padding-left: 1.2em;
}

.member h4{
    color: #091f66;
    font-size: 1.5em;
    height: 30px;
    padding: 0.5em;
}

.sns{
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0.3em 1em;
  border: 1px solid #c9b068;
  border-radius: 3px;
  text-decoration: none;
  color: #c9b068;
  background-color: #fff;
  font-weight: bold;
  transition: .4s;
}
.sns:hover{ 
  background: #c9b068;
  color: #fff;
}

dl.case1{
    margin:10px;
    padding:0;
    line-height:1.8;
}
dl.case1 dt{
    width:6em;
    float:left;
    margin:0;
    padding:0 0 0 5px;
}
dl.case1 dd{
    margin:0 0 10px;
    padding:0 5px 10px 8em;
    border-bottom:1px dashed #000;
}

.rireki{
    margin: auto;
    width:80%;
    margin-bottom: 3.5em;
}
    @media only screen and (max-width: 850px){
    .rireki{ width:100%; }
    }

@media only screen and (max-width: 767px){
.box{
    width: 80%;
    }
}

@media only screen and (min-width: 768px){
.box{
    width: 400px;
    }
}

@media only screen and (min-width: 960px){
.box{
    width: 450px;
    }
}


.box{
    display: inline-block;
    vertical-align: top;
    margin-bottom: 3em;
}

.box a {
  text-decoration: none;
  color: #67a99b;
}
.hyoshi{
    margin-bottom: 3em;
}
@media only screen and (max-width: 950px){
.hyoshi img { width: 100%; }
}

iframe[src^="https://docs.google.com/forms/d/e"]{
  width:100%;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #c9b068;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f077';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}