@charset "utf-8";

.link-css{
 height: 1px;
width: 1px;
position: absolute;
overflow:hidden;
top: -10px;
}

.vw-100{
width: 100vw;
}

.height-2rem{
height:2rem;
}

.height-3rem{
height:3rem;
}

.width-auto{
  width: auto;
}

.padding-auto{
  padding: auto ;
}

.padding-20px{
  padding: 20px ;
}

.padding-top-bottom-10px{
  padding: 10px ;
}


.offcanvas-navi{
width:75vw;
max-width:600px;
}


.head{
width:90vw;
}

.face{
width:250px;
height:250px;
}

.img-large{
background-color:rgba(255,255,255,0.3);
width : 90vw;
max-width : 1200px;
margin: 20px auto;
text-align : center ;
}

.canvas-main{
 background-color:rgba(255,255,255,0.3);
border-radius: 20px; 
width : 90vw;
max-width : 1200px;
margin: 20px auto;
text-align : center ;
}

.offcanvas-background{
background-image:url(../png/background-blue.png);
}

.padding-auto{
  padding: auto;
}

.list-outer{
  width: 80vw;
  max-width: 900px; 
  justify-content: center;
  background-color:rgba(255,255,255,0.3);
border-radius: 20px; 
margin: 10px;
margin-left: auto;
margin-right: auto;
}

.list-inner{
  width: auto;
  max-width: 800px; 
  justify-content: center;
  background-color:rgba(255,255,255,0.3);
border-radius: 20px; 
margin: 10px;
margin-left: auto;
margin-right: auto;
}

#offcanvas-icon{
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration:none;
  position: fixed;
  z-index: 999;
  top: 1rem;
  left: 1rem;
}

#offcanvas-button{
  width: 3rem;
  height: 3rem;
  top: 10px;
  left: 10px;
}

#offcanvas-text{
  border-style: dotted;
  border-radius: 0.5rem;
  color:rgb(255,114,233);
  border-color: rgb(252, 212, 246);
  padding-left: 2rem;
  position: fixed;
  top: 1.5rem;
  left: 2rem;
  background-color: rgba(255,255,255,0.5);
}

.flex-box{
  display: flex;
}

.flex{
  display: flex;
}

.flex-column{
  flex-flow: row;
}

.flex-wrap{
  flex-flow: wrap;
}

.centering{
text-align : center ;
}

.shadow-bg{
filter : drop-shadow(0px px 10px rgba(70,238,255,0.5));
}

.box{
background-color:rgba(255,255,255,0.3);
border-radius: 20px; 
width : 95vw;
max-width : 950px;
margin: 20px auto;
}

.box-main{
background-color:rgba(255,255,255,0.3);
border-radius: 20px; 
width : 95vw;
max-width : 1200px;
margin: 20px auto;
}

.box-logo{
background-color:rgba(255,255,255,0.3);
border-radius: 20px; 
width : 85vw;
max-width : 850px;
margin: 20px auto;
}

.box-intro{
  background-color:rgba(255,255,255,0.3);
  border-radius: 20px; 
  width: 75vw;
  max-width: 500px;
  margin: 20px auto;
}

.box-small{
  background-color:rgba(255,255,255,0.3);
  border-radius: 20px; 
  width: 8rem;
  margin: 20px auto;
  }

.box-18rem{
  background-color:rgba(255,255,255,0.3);
  border-radius: 20px; 
  width: 18rem;
  margin: 20px auto;
  }
  
 

.box-22rem{
  background-color:rgba(255,255,255,0.3);
  border-radius: 20px; 
  width: 22rem;
  margin: 20px auto;
  }
  
  
.box-auto{
  background-color:rgba(255,255,255,0.3);
  border-radius: 20px; 
  width: auto;
  margin: 20px auto;
  }
  
.logo{
width: 80vw;
max-width: 800px;
padding: 10px ;
filter : drop-shadow(0px 0px 10px rgba(70,238,255,0.5));
}

.logo-size{
width: 300px;
filter : drop-shadow(0px 0px 10px rgba(70,238,255,0.5));
}

body{
font-family: 'Kaisei Decol', serif;
color:#00BECC;
background-color: rgba(255,255,255,1.0);
background-image:url(../png/background-blue.png);
background-size: 100% 3px;
background-repeat: repeat-y;
background-position: right;text-shadow: rgba(0,238,255,0.5) 0px 0.6ex 3px;
}

.text_pink{
  color: #ff99fc;
}

.text-line {
  text-decoration: line-through;
}

a {
text-decoration: none;
}
a:visited {color: #0077CC; }
a:link {color: #ff99fc;}
a:hover { color: #CC0088; }
a:active { color: #ff8000; } 

.logo-appear-enter-from{opacity:0.0;}
.logo-appear-enter-to{opacity:1;}
.logo-appear-enter-active{transition:opacity 4s;}

.intro-appear-enter-from{opacity:0.0;}
.intro-appear-enter-to{opacity:1;}
.intro-appear-enter-active{transition:opacity 1s;}

.list-appear-enter-from{opacity:0.0;}
.list-appear-enter-to{opacity:1;}
.list-appear-enter-active{transition:opacity 3s;}

.main-box-enter-from{opacity:0.0;}
.main-box-enter-to{opacity:1;}
.main-box-enter-active{transition:opacity 8s;}