.cp_navi {
	background-color: #ffffff;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
	overflow: hidden;
	width: 90%;
}
.cp_navi ul {
	margin: 0;
	padding: 0;
}
.cp_navi ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 30px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi > ul > li:hover {
	background-color:yellowgreen;
}
.cp_navi > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi > ul > li > div {
	background-color: green;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 300px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi > ul > li > div ul > li {
	display: block;
}
.cp_navi > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 0px ;
	text-decoration: none;
	width: 300px;
}
.cp_navi > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}



























.titlebar{
  background-color: green;
  color: white;
  text-align: center;

 line-height: 34px;
  height: 34px;
}


.maintitle{
  background-color: blue;
  color: white;
}

.maincontents-title{
  text-align: center;
}

body {
 margin: 0;
 height: 100%;
 background-color: #E0E0E0;
 font-family: 'Questrial', sans-serif;
}

video{
  width: 100%;
  height: auto;
}


.c1{
  width: 65%;
  background-color: white;
  margin: 10px auto;
}



.p h1 h2{
  color: #FFFFFF;
}

.footer{
  background-color: #000055;
  color: white;
  text-align: center;
}

.balloon5 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon5 .faceicon {
    float: left;
    margin-right: -90px;
    width: 80px;
}

.balloon5 .faceicon img{
    width: 100%;
    height: auto;
    border: solid 3px #d7ebfe;
    border-radius: 50%;
}

.balloon5 .chatting {
    width: 100%;
}

.says {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #d7ebfe;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #d7ebfe;
}

.says p {
    margin: 0;
    padding: 0;
}

.says-m {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #98f442;
    width: 400px;
}

.says-m:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #98f442;
}

.says-m p {
    margin: 0;
    padding: 0;
}



.says-nagi {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #00aed6;
    width: 400px;
}

.says-nagi:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #00aed6;
}

.says-nagi p {
    margin: 0;
    padding: 0;
}




h3 {
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
  }

.says-naga {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #990000;
    width: 400px;
    color:#E0E0E0
}

.says-naga:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #990000;
}

.says-naga p {
    margin: 0;
    padding: 0;
}



ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}



h2 {
color: #6cb4e4;
text-align: center;
padding: 0.25em;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}


.button {
  background-color: transparent;
  border: 2px solid #000;
  color: #000;
  line-height: 50px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.button:hover {
  background-color: rgba(0, 0, 0, .2);
}


.button {
  display: inline-block;
  width: 80%;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  text-align: center;
}



.menubar_child:hover{
  background-color: (171,253,89)
}

.jimbutu{
  width: 75%;
  margin: 10px auto;
}

.buttonzone{
  text-align: center;
}

p{
    width: 90%;
    margin: 10px auto;
}

.contents-child{
  width: 65%;
  margin: 10px auto;
}


hr {
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
   width: 216px;
}

.kaisetu{
  background: #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px;
  margin-left: auto;/*はみ出ないように調整*/
  margin-right: auto;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
  width: 70%;
}

.kaisetu_img{
  width: 100%;
  height: auto;
  clear: both;
  border: 2px orange solid;
}