/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

*{
  box-sizing: border-box;
}

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  cursor: url(images/c.png),auto;
}



.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}


.sidebar-left {
  width: 20%;
  background-color: #ffffff;
  padding: 10px;
}

.main-content {
  width: 60%;
  background-color: #acdcff;
   padding: 0.5em 1em;
    border: solid 3px #acdcff;
    border-radius: 8px;
}

.sidebar-right {
  width: 20%;
  background-color: #ffffff;
  padding: 10px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column
  }

  .sidebar-left,
  .main-content,
  .sidebar-right,　{
    width: 100%;
  }
}



.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #9ccfff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

.circle {
border-radius: 50%;
}

h1 {
  text-align: center;
  background: #68b4ff;
  box-shadow: 0px 0px 0px 5px #68b4ff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #ffffff;
}

footer{
  padding: 0.05rem;
    text-align: center;
  text-align: center;
  background: #68b4ff;
}

a,a:visited{
    text-decoration: none;
    color: #ffffff;
}
a:hover{
    color: #02c4ffee;
     cursor: url(images/c.png),auto;
}

.snsicon{
  font-weight: bold;
   text-decoration: none;
    color: #5b30f6;
}

img {
  max-width: 100%;
  height: auto;
}
 
 .stalker {
  background-color: rgba(28,180,211,.5); /* 背景色 */
  border-radius: 50%; /* 正円 */
  height: 30px; /* 円の高さ */
  left: -15px; /* widthの半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -15px; /* widthの半分 */
  transition: transform .3s ease-out; /* 遅れてついてくる時間 */
  width: 30px; /* 円の幅 */
  z-index: 999; /* 一番上に来るように */
}