h2#danraku2{
border-bottom: solid 3px black;
/*線の種類（実線） 太さ 色*/
}

h3#danraku3{
color: #6594e0;/*文字色*/
border-bottom: dashed 2px #6594e0;
/*線の種類（点線）2px 線色*/
}

h4#danraku4{
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

.marker {
  font-weight: bold;/*文字を太く*/
  background: linear-gradient(transparent 75%, #fff799 75%);/*マーカー色*/
}

/* フキダシ */
#content #main #entry .entry-content .l-fuki,
#content #main #entry .entry-content .r-fuki {
  position: relative;
  width: 80%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1;
}
#content #main #entry .entry-content .l-fuki {
  margin: 20px 20% 40px 0;
}
#content #main #entry .entry-content .r-fuki {
  margin: 20px 0 40px 19%;
}
#content #main #entry .entry-content .l-fuki::before,
#content #main #entry .entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  z-index: 2;
}
#content #main #entry .entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#content #main #entry .entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
#content #main #entry .entry-content .l-fuki::after,
#content #main #entry .entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  top: -10px;
  border-radius: 40px;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#content #main #entry .entry-content .l-fuki::after {
  right: -110px;
}
#content #main #entry .entry-content .r-fuki::after {
  left: -110px;
}
@media screen and (max-width: 620px) {
  #content #main #entry .entry-content .l-fuki,
  #content #main #entry .entry-content .r-fuki {
    width: 70%
  }
  #content #main #entry .entry-content .l-fuki {
    margin-right: 30%;
  }
  #content #main #entry .entry-content .r-fuki {
    margin-left: 30%;
  }
}
@media screen and (max-width: 478px) {
  #content #main #entry .entry-content .l-fuki::after,
  #content #main #entry .entry-content .r-fuki::after {
    width: 60px;
    height: 60px;
    border-radius: 30px;
  }
  #content #main #entry .entry-content .l-fuki::after {
    right: -84px;
  }
  #content #main #entry .entry-content .r-fuki::after {
    left: -84px;
  }
}
.chara01::after {background-image:url("https://genki-heiwado.com/contents2018/wp-content/uploads/2019/02/chara01.jpg");}
.chara02::after {background-image:url("https://genki-heiwado.com/contents2018/wp-content/uploads/2019/02/chara02.jpg");}
.chara03::after {background-image:url("https://genki-heiwado.com/contents2018/wp-content/uploads/2019/02/chara03.jpg");}
.chara04::after {background-image:url("https://genki-heiwado.com/contents2018/wp-content/uploads/2019/02/chara04.jpg");}
.chara05::after {background-image:url("https://genki-heiwado.com/contents2018/wp-content/uploads/2019/02/chara05.jpg");}


/* Flexbox デモ 1 : レイアウトの基本 */

main {
    display: flex;
  flex-wrap: wrap;
  padding: 0.4em;
  margin: 0 0 2em;
}

main div.animal {
  background: #fff;
  padding: 1em;
  flex: 1 0 250px;
  margin: 0.4em;
}

.btn-square-little-rich {
  position: relative;
  display: inline-block;
  padding: 1.2em 1.2em;
  text-decoration: none;
  color: #000;
  background: #d4c4b2;/*色*/
  border: solid 1px #827373;/*線色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn-square-little-rich:active {
  /*押したとき*/
  border: solid 1px #03A9F4;
  box-shadow: none;
  text-shadow: none;
}

.btn-icon {
  display: inline-block;
  text-align: left;
  background-color: #337bc0;
  font-size: 24px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 32px 8px 32px;
  border-radius: 4px;
}

.btn-icon:before {
  font-family: "FontAwesome";
  content: "\f105";/* 好きなフォントアイコンを　*/
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -8px;
}

.btn-icon:hover {
  opacity: 0.8;
}

figure {
	float: left;
	margin: 0 15px 15px 0;
	width: 40%;
}
figure img {
	max-width: 100%;
}
.float_none {
	clear: both;
}


.furo {
	float: right;
	margin: 0 15px 15px 0;
	width: 40%;
}

main {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

main div.yoko {
  width: calc(16.6% - 10px);
  margin: 5px;
}

/* Flexbox デモ 2 : レスポンシブ対応 */
@media (max-width: 500px) {
  main div.yoko {
    width: calc(33.3% - 10px);
    margin: 5px;
  }
}

a img{
  opacity: 1;
  transition: 0.3s;
}
a:hover img{
  opacity: .5;
}

main {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

main div.box02 {
  width: calc(33.3% - 60px);
  margin: 30px;
}

/* Flexbox デモ 2 : レスポンシブ対応 */
@media (max-width: 500px) {
  header {
    flex-direction: column;
    align-items: center;
  }

  main div.box02 {
    width: calc(100% - 10px);
    margin: 5px;
  }
}

.midashih4 {
    padding-bottom: 4px;
    border-bottom: 1px dotted #666;
    clear: both;
    font-size: 121.4%;
    line-height: 130%;
    margin: 30px 0px 20px;
    padding: 0;
}

.button-1 {
display: inline-block;
padding: 0.4em 1.8em;
font-size: 1.8em;
color: #000000;
text-decoration: none !important;
user-select: none;
border: 2px #000000 solid;
border-radius: 0px;
background: #ffffff;
transition: 0.4s ease;
}

.button-1:hover {
  color: #fff;
  background: #002140;
}