@charset "UTF-8";


body{
    font-family: "Shippori Mincho", serif;
    background-color: #c9e1f8;
    background-image:linear-gradient(#daf6ff,#fff);
    margin: 0;
    width: 100%;
    color: #0a3078;
}

h2{
    background-size: 20px;
    color: #c3cff4;
}
.title{
    font-size: 1.8rem;
    color: #676be1;
}

.hako{
    margin: 10% 11%;
    background-color: #fff;
    border-radius: 30px;
    opacity: 80%;
    background-image:  #fff 2px;
}



.link{
    color: #cad6fa;
    letter-spacing: 2px;
    line-height: 180%;
    text-decoration: none;
    border-bottom:none;  
    margin: 0 0 3% 7%;
}
.link:hover{
    font-family: arial;
    text-shadow: 0 0 2px #1d33b4;
    transition: max-height 5s;
}

.link:visited{
    color: #3e51be;
    line-height: 180%;
    text-decoration: none;
    margin: 0 0 3% 7%;
}






.line{
    width: 100%;
    height: 110%;
    position:absolute;
    color: #b9d0f7;
    margin-bottom: 0;
    top: 10%;
    bottom: 90%;
    overflow: hidden;
    z-index: -1;
}

.line::before{
    content: '';
    position: absolute;
    background-color: #c9e1f8;
    top: 15%;
    bottom: 250%;
    left: 0%;
    right: 0%;
    margin-bottom: -10em;
    transform: skewY(15deg) translateY(-10px);
    z-index: -1;
}

.line2{
    width: 100%;
    height: 150%;
    position:absolute;
    color: #b9d0f7;
    margin-bottom: 0;
    top: 80%;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

.line2::before{
    content: '';
    position: absolute;
    background-color: #c9e1f8;
    top: 80%;
    bottom: 18%;
    left: 0%;
    right: 0%;
    transform: skewY(-20deg) translateY(5px);
    z-index: -1;
}