/* CSS Document */

body{
    color: #2B2B2B;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-medium {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-1p-extrabold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.logo{
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 1em;
    margin-left: 2em;
    margin-top: 1em;
}

.hero001-bg{
    display: inline-block;
    text-align: left;
    padding: 1em;
    border-radius: 54% 46% 38% 62%/49% 70% 30% 52%;
    background-color: #2d1b11;
    background-image: linear-gradient(135deg, #84fab0 10%, #8fd3f4 100%);
}
.hero002-bg{
    display: inline-block;
    text-align: left;
    padding: 2em;
    border-radius: 54% 46% 38% 62%/49% 70% 30% 52%;
    background-color: #2d1b11;
    background-image: linear-gradient(135deg, #89f7fe 10%, #6a99ff 100%);
}
.hero003-bg{
    display: inline-block;
    text-align: left;
    padding: 1em;
    border-radius: 49% 70% 30% 52%/54% 46% 38% 62%;
    background-color: #2d1b11;
    background-image: linear-gradient(135deg, #f093fb 10%, #8fd3f4 100%);
}
.gradation1 {
  background-image: linear-gradient(62deg, #22d3ee, #8fd3f4);
}
.background{
    position: relative;
}
.background::before{
    position: absolute;
    content: "";
    left: 0;
    top: -10%;
    background-image: linear-gradient(62deg, #22d3ee, #8fd3f4);
    width: 20%;
    height: 70%;
    z-index: -1;
}
.button001 a{
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 220px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
}

.buraImg{
    position: relative;
    text-decoration: none;
}
.buraImg img{
    display: block;
    transition: 0.3s;
}
.buraT1:before{
  content:"めい";
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.buraT2:before{
  content:"アキバコ";
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.buraT3:before{
  content:"こえび";
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.buraImg:hover img{
  filter:blur(5px);
}
.buraImg:hover:before{
  opacity:1;
  margin-top:-0.5em;
}
footer a{
    color: #2b2b2b;
}