@charset "utf-8";

/*===============================================================
    general 
===============================================================*/
.mainblank{
  height:2000px;
}

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

hr{
  margin:0px 0px 0px 0px;
  border:none;
}

.fen{
  font-family: 'Georgia','Athelas','Cochin',sans-serif;
}
.fb{
  font-weight:bold;
}

.ib{
  display:inline-block;
}

.fba{/*fontbasec windowsでは日本語明朝体・macスマホではゴシック*/
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Cambria','Courier New','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}

/*to top button*/
.toTopButton{
  display:block;
  width:70px;
  height:70px;
  bottom:4%;
  right:2%;
  position:fixed;
  z-index:99;
  background-image:url(../sp_commonimages/sp_toTop.png);
  background-repeat: no-repeat;
  opacity:0.7;
  visibility:hidden;
}
.vvt{visibility:visible;}

/*===============================================================
  header
===============================================================*/
.headerborder{
  height:5px;
}

.headbg{
  display:block;
  width:100%;
  background-color:rgb(237, 235, 235);
  border-bottom:solid 3px rgb(131, 131, 131);
  padding:0px 0px 0px 0px;
  z-index:9999999;
}

.headerCenter{
  display:flex;
  flex-direction:row;
  position:relative;
  }
  
  .headerSticky{
    position: sticky;
    z-index:10;
    top: 0;
    width: 100%;
    margin: 0;
  }

/*mainmenu*/
.logobg{
display:block;
width:80px;
height:50px;
margin:10px 0px 10px 0px;
background:url(../sp_commonimages/sp_logo.jpg);
background-color:white !important;
background-repeat: no-repeat;
border-radius:0px;
transition:filter 0.5s, transform 0.5s, box-shadow 0.5s;
z-index:4;
}
.logobg:hover{
filter:brightness(105%);
transform: translateZ(50px);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}

.logo{
font-family: 'Mongolian Baiti','Georgia',sans-serif;
letter-spacing:1px;
position:relative;
display:block;
width:80px;
height:50px;
line-height:50px;
text-align: center;
font-weight:bold;
font-size:0.7rem;
}

.alogo{
  margin-left:3%;
  text-decoration:none;}

.mainmenu{
  position:absolute;
  right:1%;
  display:flex;
  flex-direction:row;
  height:40px;
  margin:15px 0px 15px 0px;
  }

.mainmenu li{
position:relative;
font-size:0.6rem;
font-weight:bold;
margin:0px 5px 0px 5px;
list-style-type:none;
display:block;
width:100%;
text-align: center
}

.mainmenuContents{
  letter-spacing:1px;
  display:block;
  height:40px;
  line-height:40px;
  margin:0px;
  padding:0px 4px 0px 4px;
  background-color:rgb(203, 202, 202);
  border-radius:5px;
  transition:border 1s, border-radius 1.2s, color 0.4s, text-shadow 0.4s;

}

.amainmenu{
  text-decoration: none;
  color:black;
}

.mainmenuContents:hover{
color:white;
background-color: #aeacac;
border:solid black 1.5px;
border-radius:15px;
text-shadow:1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0),
-1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0),
0px 1px 0 rgb(0, 0, 0),  0 -1px 0 rgb(0, 0, 0),
-1px 0 0 rgb(0, 0, 0), 1px 0 0 rgb(0, 0, 0);
}


/*MainFadeInAnimation*/
.MFIAnimation{
opacity:0;
}

.mainFadeIn{
animation-name:mainFadeIn;
animation-duration:3s;
animation-delay:0s;
animation-fill-mode:forwards;
}
@keyframes mainFadeIn{
0%{
  opacity:0;
}
100%{
  opacity:1;
  transform:translateY(0);
}
}
.FIDown{transform:translateY(200px);}
.FIToLeft{transform:translateX(200px);}
.FIToRight{transform:translateY(-200px);}
  
/*===============================================================
    footer
===============================================================*/
.footer{
  display:block;
  position:relative;
  bottom:0;
  text-align:center;
  height:10;
} 

div#footerContents{
  display:block;
  position:relative;
  background-color:rgb(215, 215, 215);
  padding-bottom:13px;
  padding-top:10px;
}

.waves {
  position:relative;
  width: 100%;
  height:60px;
  margin-bottom:-8px; /*Fix for safari gap*/
}
/*footerWaves*/
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}