@charset "utf-8";

/* =======================================================
	index
======================================================= */
body{
	overflow-y: scroll;
}
html,
body{
	height: 100%;
}
.wrap{
	overflow: visible;
}
.header{
	margin: 0 auto;
}
.index_cont{
  position: relative;
  box-sizing: border-box;
  display: flex;
   flex-direction: column;
  width: 100%;
    min-height: 100vh;
  margin: 0;
  overflow: hidden;
  text-align: center;
  background-color: #d6d6d6;
}
@keyframes gradient {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
h1{
  display: block;
  width: 627px;
  margin: 43px auto 30px;
  text-align: center;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}
footer{
  width: 100%;
  padding: 20px 0;
    margin-top: auto;
  text-align: center;
  background-color: #fff;
}
main{
  padding: 0 15px;
}
.memo_info{
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  border-top: 1px dotted #333;
}
.memo_info li{
  border-bottom: 1px dotted #333;
}
.about_ttl{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 3px;
}
.about{
  margin: 20px 0 0;
  font-size: 1.2rem;
  vertical-align: middle;
  text-align: center;
}
.about img{
  vertical-align: middle;
}
.memo_link{
  display: block;
  padding: 0 0 20px;
  margin: 20px 0 0;
}
.memo_link:hover{
  text-decoration: none;
  opacity: 0.8;
}
.link_img{
  width: 90px;
  text-align: center;
}
.link_img img{
  border-radius: 50%;
}
.link_text{
  padding-right: 37px;
  text-align: left;
}
.date{
  display: inline-block;
  font-size: 1.3rem;
}
.outsite_ico{
  display: inline-block;
  padding-left: 3px;
  line-height: 1.3;
  vertical-align: middle;
}
.outsite_ico img{
  margin-top: 1px;
  vertical-align: top;
}


/* ===========================================
	MediaQueries
=========================================== */

/* スマホ----------------------------- */
@media screen and (width <= 767px){
	h1{
    width: 90%;
    margin: 0 auto 30px;
    text-align: center;
  }
  .index_header{
    margin: 40px 0;
  }
  .wrap h1 img{
    width: 104%;
    max-width: 200%;
    height: auto;
    margin: -2%;
  }
  .about_ttl{
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  .link_text{
    padding: 0;
    text-align: center;
  }
  .link_text p{
    font-size: 1.4rem;
  }
  .link_img{
    margin: 0 auto;
  }
  footer{
    padding: 5px 0 15px;
  }
}

/* PC----------------------------- */
@media screen and (width >= 768px){
  .index_cont > div{
    padding: 50px 0;
  }
  .memo_link{
    display: flex;
    flex-wrap: wrap;

  /*     place-content: center center; */
  }
  main{
    margin: 50px 0 0;
  }
}