@charset "utf-8";

body {
    width: 100%;
  background-color: #bbF0Ea;
    background-image: url(https://haradarica.com/image/bg.gif);
  color:#555;
  font-size: 20px;
  line-height: 2.5em;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    letter-spacing: 0.05em;
}

div#wrapper{
    width:100%;
    margin: 0 auto;
}

h1 {
    width: 90%;
    height: 70px;
    margin-top: 20px;
    margin-left: 4%;
    text-align: center;
    color: #c84d92;
    background-color: #FFF;
    border: 3px solid #ee4d92;
    border-radius: 50px 50px 0 0;
    line-height: 2.6em;
}

ul{
    margin-bottom: 200px;
}

li {
    display: block;
    width: 100%;
    height: 70px;
    padding:0;
    margin:0;
    text-align: center;
    background-color:rgba(200,77,146,0.8);
    border: 3px solid #FFF;
    position: relative;
}

a:link, a:visited {
    display: block;
    width: 90%;
    margin: 3% 4%;
    text-decoration: none;
    color: #FFF;
}

li.li_main{
    background-color:rgba(230,90,170,1);
    background-image: url(https://haradarica.com/image/bg_stripe.png);
    position: relative;
}

a:hover li.li_main, a:active {
    background-image:none;
}

a:hover, a:active {
    background-color:rgba(200,77,146,1);
}

#icon_tri img{
    position: absolute;
    top:27px;
    left:15px;
    z-index: 100;
  animation: blink 3s ease infinite;
}

@keyframes blink {
  100% { transform: rotateX(360deg); }
}

.text_ja {
    width: 100%;
    position: absolute;
    bottom:15px;
    left:50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1em;
    font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.text_ja_h1 {
    width: 100%;
    color: #555;
    margin: -23px auto 10px 0;
    font-size: 14px;
    line-height: 3em;
    font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

footer {
    width: 100%;
    height: 30px;
    background-color: #c84d92;
    color:#FFF;
    text-align: center;
    font-size: 12px;
    line-height: 30px;
    position: fixed;
    bottom: 0;
}


/* 表示幅600px以上 ====================　*/

@media (width > 600px){
    
div#wrapper{
    width:600px;
}
 
}