body{
    background-color:darkslategrey;
}

h3{
    color:azure;
    padding: 8px;
    text-align: center;
/*        font-family: Impact;*/

}

p,a{
    color: azure;
/*    font-family: cursive;*/
    text-decoration: none;
/*    font-size: 19px;*/
}
#theme p{
    color: dimgrey;
}

#theme h3{
    text-align: left;
}

/* レイアウトする全体のブロック指定*/
#center {
    /*width:1200px;*/
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 19px;
}


#sidebar{
    width: 17%;
    height: auto;
    background-color:darkseagreen;
    float: left;
    text-align: center;
    border-radius: 3%;
}

#sidebar h3{
color: firebrick;
    font-family: Impact;
}

.sfloat{

    padding: 8px;
    text-align: left;
}

#theme {
    margin-right: 2%;
    padding: 10px;
    background-color: #EEEEEE;
    border-radius: 0.5%;
    color: darkslateblue;
}
#theme h3{
    color:darkslateblue;
}

#layout a{
    color:firebrick;
}

#tyu4{
    text-align: center;
    clear: both;
}

/*here*/


h4{
    font-size: 16pt;
    background: white;
    padding: 10px;
    border-left: double 10px #ffc06e;
}


.sinario-point {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #222222;
	font-size: 16px;
	background: #FFF;
 	border: solid 3px #FF6928;
 	box-sizing: border-box;
    border-radius: 10%;
    text-align: center;
}

/*
.sinario-point:before{
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
 	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid #FFF;
 	z-index: 2;
}
*/

.sinario-point:after{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
 	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid #FF6928;
 	z-index: 1;
}

/*=============*/
.article-link {
  position: fixed;
  top: 90%;
  right: 10px;
  z-index: 999;
  display: flex;
  height: 100px;
  color: #333;
  text-decoration: none;
}
.article-link:hover {
  text-decoration: none;
}
.article-link > p.nes-balloon {
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  color: #333;
}
.article-link > i.nes-octocat {
  align-self: flex-end;
}

@media screen and (max-width: 768px) {
  body {
    padding: 0;
    margin: 2rem 0.2rem;
  }
  .balloon.nes-container .nes-balloon {
    max-width: 70%;
  }

  .article-link {
/*    display: none;*/
  }
}

