@import url("common.css");


/* Polka Dots(Blue) Template
 * (C) Kakei.R
 * update 2016/07/09
 */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #d2eefd;
}

/* メニュー リスト */

ul {
  margin-top: 1em;
  list-style-type: none;
  line-height: 1.1;
}

li ul {
  margin-top: 0;
}

/* メニュー リンク */

li a {
  display: block;
  padding: 0.8em 13px 0.8em 0.2em;
  border: 1px solid #99ccff;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACMSURBVHjaYvz//z8DuYAJjc8KxIVALEaUbpDNSJgViN8A8R0gtkWTw8DYNN/6DwE/gbiUXM0wsB6IJcnVDAL3gdiNXM0g8BeI64GYmxzNMJAOU89EYtT2APFyfFGFzebnQBxIjp93A7EiOaHdDMTMpMQzKIU9A2IvUlMYCxBXAbECIY0gzEhJrgIIMABZviV2SO/rqwAAAABJRU5ErkJggg=="), -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.9)), to(rgba(153,204,255,.5)));
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACMSURBVHjaYvz//z8DuYAJjc8KxIVALEaUbpDNSJgViN8A8R0gtkWTw8DYNN/6DwE/gbiUXM0wsB6IJcnVDAL3gdiNXM0g8BeI64GYmxzNMJAOU89EYtT2APFyfFGFzebnQBxIjp93A7EiOaHdDMTMpMQzKIU9A2IvUlMYCxBXAbECIY0gzEhJrgIIMABZviV2SO/rqwAAAABJRU5ErkJggg=="), linear-gradient(to bottom, rgba(255,255,255,.9), rgba(153,204,255,.5));
  background-repeat: no-repeat, repeat;
  background-position: center right, top;
  font-size: 1.1rem;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px 1px .3em #fff, 0 .18em .15em rgba(0,0,0,.2);
  text-decoration: none;
  clear: both;
  font-weight: bold;
}

li a:hover, li a:active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACMSURBVHjaYvz//z8DuYAJjc8KxIVALEaUbpDNSJgViN8A8R0gtkWTw8DYNN/6DwE/gbiUXM0wsB6IJcnVDAL3gdiNXM0g8BeI64GYmxzNMJAOU89EYtT2APFyfFGFzebnQBxIjp93A7EiOaHdDMTMpMQzKIU9A2IvUlMYCxBXAbECIY0gzEhJrgIIMABZviV2SO/rqwAAAABJRU5ErkJggg=="), -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,204,255,.3)));
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACMSURBVHjaYvz//z8DuYAJjc8KxIVALEaUbpDNSJgViN8A8R0gtkWTw8DYNN/6DwE/gbiUXM0wsB6IJcnVDAL3gdiNXM0g8BeI64GYmxzNMJAOU89EYtT2APFyfFGFzebnQBxIjp93A7EiOaHdDMTMpMQzKIU9A2IvUlMYCxBXAbECIY0gzEhJrgIIMABZviV2SO/rqwAAAABJRU5ErkJggg=="), linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,204,255,.3));
  background-repeat: repeat-x, repeat;
}

/*  width 1024px*20% < screens < height 1024px */

@media only screen and (min-width:201px) and (max-height:1024px) {
li a:before { content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAMMSURBVHjarFVNTxpRFH1vgBEGYUAoIIhAggUaaUJT0jRadGO3pBp33fXX+BO64Q90Y1rTaLqwKWkb2hA0DUkTksqHJY1UocrXCErPs2NjhUEWneQkw5s7Z+4999wL7fV65H9faqUHh4eHZH19/eJeq9WS8fFx2mg0eu12+29Mt9slZrOZrKysEI7jbiY9Pj4mW1tbRKVSEY1Go9Xr9dZWq/Xr9PT05Pz8/CIG92RqaoosLy//8y6nRMq+LAgCI+QsFsv0/Pw8DwI7z/Mqdq7T6S6esypGLp9pLUkSQYYuv9/PLS4u7uHYdHR0ZEYVP1npV0seidRkMpFoNCocHBzYlpaWvrpcrt7CwoJYLpfdzWbzSzAYrCWTSXJ2dtZf5TDSiYmJ0OzsbBuZNnAUQvnP4vH4IzTt9urqKmV6soxHJk2lUvZSqcSy3JPL1AF6n89nhJYzGxsbHkrp4H4MOoSWdHt7+2E4HObtdvt9WaYs8BZueB0IBNrZbHYun89r0cjRSJHlNBrliEQiAn7aACacBLxE1u+8Xu8nm82m73Q6dwZl20cKc1OQRtGIOjRz4ohnZrga43a79yHDd6fTGWKyXJ/KPtJ0Ou2B+DNojhqlijgqXY9ByT08z8MRk2iaf2imbFJ2d3ejCLagvEk5S2mQRPDvD4fDIWAIghhfqkgKY6uq1aoPE8SrcbHvAHcVJk5tNBoNSCRQLBZFRfPDyBTBKoweC6oALcALxIHPbNzld2LI0AdriZBIgFu0iqRWq7VrMBjY0riFwG84KgMe4AEQkV3AqtNA90k0yIAkcpCrqlg+20ihUOgjTM/BLkGAmbDITAFQOb4JMsjYsFQqFSM+/h7JSEO7H4vFMijtxc7OjgOL4zE0c+F4H6jJxNZ6vX6vUCi4MplMCvdvrnuVDtr8bBFvbm4+qdVqTzFVNmRygpXXgeY6LG99Lpdrg/AVGvQcLmmtra2RP30dQnq5+ROJhBkdnhNFMTg2NmaAHBI8ugfNP+C+ALB/hL7NT2/6j2LeZTGXcVczUrp+CzAAYa1NP61R4VYAAAAASUVORK5CYII=');}
}

/* screens < width 1024px*20% */

@media only screen and (max-width:200px) {
li a { text-align: center;}
}

/* screens < width 1024px*20% x height 800px */

@media only screen and (max-width:200px) and (max-height:800px) {
li a i { display: none;}
}

/* height 960px < screens < width 980*20%=196 */

@media only screen and (max-width:197px) and (min-height:960px){
li a { font-size: 1.6rem;}
}

/* Polka Dots(Blue) Template End */